<template>
	<view class="createAvatar" :style="{ height: webStyle.height }">
		<view class="mp-weixin" v-if="['mp-weixin', 'app'].includes(systemInfo.uniPlatform)">
			<!-- <web-view :fullscreen="true" id="myWebview" @message="wxGetMsg" :src="'http://192.168.14.75:8080/#/pages/createAvatar/createAvatar?' + urlParams"></web-view> -->
			<web-view :fullscreen="true" id="myWebview" @message="wxGetMsg" :src="'https://h5.yainoo.com/#/pages/createAvatar/createAvatar?' + urlParams"></web-view>
		</view>
		<view class="web" v-if="['web'].includes(systemInfo.uniPlatform)" :style="{ height: webStyle.height, top: webStyle.top }" @tap="closeSomeComp">
			<template v-if="['web'].includes(systemInfo.uniPlatform) && !focusContent">
				<view class="back-box" v-if="0">
					<image class="icon" @tap="back" :src="imgPath + 'createAvatar/back.svg'" mode=""></image>
					<view class="right-btns">
						<view class="btn-item style1">编辑封面</view>
						<view @tap="submit" class="btn-item style2">导出</view>
					</view>
				</view>
				<image :class="['back-box-icon', getEnv.plus ? 'appStyle' : '']" @tap="back" :src="imgPath + 'createAvatar/back.svg'" mode=""></image>
				<!-- <view :class="['back-box-btn-item', 'style1', getEnv.plus ? 'appStyle' : '']">预览</view> -->
				<view @tap="openPop" :class="['back-box-btn-item', 'style2', getEnv.plus ? 'appStyle' : '']">导出</view>
			</template>

			<view class="work-show" :style="{ height: workShowH }">
				<view :style="showBoxStyle" class="show-box">
					<canvas @tap.stop="" @touchstart="canvasdown" @touchmove="canvasmove" @touchend="canvasup" :style="showBoxStyle" canvas-id="show-box" id="show-box"></canvas>
					<canvas id="text-cvs" canvas-id="text-cvs" class="text-cvs" :style="{ width: showBoxStyle.width, height: showBoxStyle.height }"></canvas>
				</view>
			</view>
			<view class="web-bottom" :style="webBottomStyle">
				<view class="center-box" v-show="!focusContent">
					<view class="l">
						<image class="icon1" :src="imgPath + 'createAvatar/wang.png'" mode="widthFix"></image>
						<view class="text">00:00/{{ surplusTime||'00:00' }}</view>
					<!-- 	<view class="add">
							<image class="icon2" @tap="toBuyPage" :src="imgPath + 'createAvatar/add.svg'" mode="widthFix"></image>
						</view> -->
					</view>
					<view class="r">
						<view class="text">字幕</view>
						<switch class="switch" :checked="subtitlesShow" @change="changeSubtitlesShow" color="#00997f" style="transform: scale(0.7)" />
						<!-- <image class="icon2" :src="imgPath + 'createAvatar/quan.svg'" mode="widthFix"></image> -->
					</view>
				</view>
				<view class="changjingList" v-if="changjing.length != 0 && changjingAc != -1" v-show="!focusContent">
					<view :class="['changjing-item', changjingAc == index ? 'ac' : '']" v-for="(item, index) in changjing" @tap="changeChangjing(index)" :key="index">
						<view class="changjing-work-show" style="">
							<view :class="changjing_show_box_class">
								<image class="pic" :src="item.scene2Url" mode=""></image>
							</view>
						</view>
						<view class="del" v-show="changjing.length > 1" @tap.stop="delChangjing(item, index)">
							<image :src="imgPath + 'createAvatar/changjing-del.svg'" mode="" class="del-icon"></image>
						</view>
					</view>
					<view class="changjing-item-add" @tap="addChangjing">
						<image class="icon" :src="imgPath + 'createAvatar/changjing-add.svg'" mode=""></image>
					</view>
				</view>
				<view class="yuliao">
					<view class="yuliao-tabbar" v-if="0">
						<view class="item" v-for="(item, index) in yuliaoTabbarList" @tap="changeYuliaoTabbarInd({ item, index })" :key="index">
							{{ item.text }}
						</view>
					</view>
					<view class="yuliao-contnet">
						<view class="content-box-view" v-show="yuliaoTabbarInd == 0">
							<view class="isAudio" v-show="audioSrc">
								<image class="icon" :src="imgPath + 'createAvatar/yinliang.svg'" mode="widthFix"></image>
								<view class="text">{{ audioSrc ? audioSrc.slice(audioSrc.lastIndexOf("/") + 1) : "音频片段" }}</view>
								<image class="del" @tap="delAudioSrc" :src="imgPath + 'createAvatar/del2.svg'" mode="widthFix"></image>
							</view>
							<textarea :style="{ 'padding-top': focusContent ? '10vw' : '' }" class="content" v-show="!audioSrc" v-model="content" :maxlength="2000" @blur="contentBlur" placeholder="请输入文案" @tap.stop="textareaTap" @input="contentWatch" @focus="contentFocus" />
							<view class="number" v-if="0">{{ content.length }}/2000</view>
							<view class="btn-box" v-if="1">
								<view class="left">
									<view v-show="!focusContent" class="btnItem style1" v-if="content.length != 0 || 1" @tap="LuYinShow = true">
										<image class="icon" :src="imgPath + 'createAvatar/luyin.svg'" mode="widthFix"></image>
										<view class="text">录音</view>
									</view>
									<view v-show="focusContent" class="btnItem style1" v-if="content.length != 0 || 1" @tap="">
										<view class="text">确定</view>
									</view>
								</view>
								<view class="right">
									<view v-if="0" class="btnItem style2" @tap="toPage('/pages/AICont/AICont')">
										<image class="icon" :src="imgPath + 'createAvatar/fanyi.svg'" mode="widthFix"></image>
										<view class="text">AI翻译</view>
									</view>
									<view class="btnItem style2" @tap="toPage('/pages/AIContMenu/AIContMenu')">
										<image class="icon" :src="imgPath + 'createAvatar/jiaoben.svg'" mode="widthFix"></image>
										<view class="text">AI脚本</view>
									</view>
								</view>
							</view>
							<view class="shou" v-show="focusContent">
								<image class="icon" :src="imgPath + 'createAvatar/arrow.svg'" mode="widthFix"></image>
							</view>
						</view>
						<view class="audio-box" v-show="yuliaoTabbarInd == 1">
							<view class="uploadAudio">
								<image class="icon" :src="imgPath + 'createAvatar/audio-add.svg'" mode=""></image>
								<view class="text">添加音频</view>
							</view>
							<view class="audio-list">
								<view class="audio-item" v-for="(item, index) in 12" :key="index">
									<view class="left">
										<view class="pic-box">
											<image class="audio-pic" :src="imgPath + 'createAvatar/music&audio.svg'" mode=""></image>
											<view class="playStatusIcon">
												<image class="icon playing" src="" mode=""></image>
												<image class="icon played" src="" mode=""></image>
											</view>
										</view>
										<view class="date-time">
											<view class="date">{{ "2023-08-17" }}</view>
											<view class="time">{{ "17:43:50" }}</view>
										</view>
									</view>
									<view class="right">
										<view class="time">{{ "00:12" }}</view>
										<image class="icon" :src="imgPath + 'createAvatar/delAudio.svg'" mode=""></image>
										<view class="useBtn">
											<view class="useBtn-text">使用</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="footer-bar" v-show="footerBarShow">
					<view :class="['footer-bar-item', footerBarListAc == item.ac ? 'ac' : '']" :key="index" v-for="(item, index) in footerBarList" @tap.stop="changeFooterBarListAc({ item, index })">
						<image mode="" class="icon" :src="imgPath + 'createAvatar/footer-icon/' + item.icon + (footerBarListAc == item.ac ? '-ac' : '') + '.svg'"></image>
						<view class="text">{{ item.text }}</view>
					</view>
				</view>
			</view>

			<LuYin ref="LuYin" :show="LuYinShow" @close="LuYinShow = false" :isLoop="true" @join="addAudioSrc"></LuYin>

			<!-- <view class="">{{showText}}</view> -->
			<MyDialog :customStyle="myDialogStyle" :show="myDialogShow" :height="myDialogH" :bottom="myDialogB" :zIndex="myDialogZ">
				<PickTemplate v-show="footerBarListAc == 8" @changeMyDH="changeMyDH" @tap.stop="" @pickTemplate="showConfirmDialogOpt1" :pageItem="footerBarList[footerBarList.findIndex((e) => e.ac == footerBarListAc)]"></PickTemplate>
				<PickAvatar
					:promiseRes="PickAvatarRes"
					@pickAvatar="pickAvatar"
					@changeMyDH="changeMyDH"
					:show="myDialogShow"
					ref="PickAvatar"
					@removeAvatar="removeAvatar"
					@changeZIndex="changeZIndex"
					:currInd="scene2CurrInd"
					:scene2="scene2"
					:yusheSize="pickAvatarYusheSize"
					v-show="footerBarListAc == 1"
					:pageItem="footerBarList[footerBarList.findIndex((e) => e.ac == footerBarListAc)]"
				></PickAvatar>

				<PickSpeaker
					@changeSpeed="changeSpeed"
					@changePitch="changePitch"
					@changeVolume="changeVolume"
					@pickSpeaker="pickSpeaker"
					v-show="footerBarListAc == 7"
					:show="myDialogShow"
					:pageItem="footerBarList[footerBarList.findIndex((e) => e.ac == footerBarListAc)]"
					@removeSpeaker="removeSpeaker"
					:selectItem="speaker"
					@changeMyDH="changeMyDH"
					:content="content"
				></PickSpeaker>

				<PickBgi
					:promiseRes="PickBgiRes"
					@pickBgi="pickBgi"
					@changeMyDH="changeMyDH"
					@removeEl="removeEl"
					@changeZIndex="changeZIndex"
					:currInd="scene2CurrInd"
					:scene2="scene2"
					v-show="footerBarListAc == 2"
					:pageItem="footerBarList[footerBarList.findIndex((e) => e.ac == footerBarListAc)]"
					:show="myDialogShow"
				></PickBgi>

				<PickPicture
					:promiseRes="PickPictureRes"
					@pickPicture="pickPicture"
					@changeMyDH="changeMyDH"
					:pageItem="footerBarList[footerBarList.findIndex((e) => e.ac == footerBarListAc)]"
					@removeEl="removeEl"
					@changeZIndex="changeZIndex"
					:currInd="scene2CurrInd"
					:scene2="scene2"
					v-show="footerBarListAc == 3"
					:show="myDialogShow"
				></PickPicture>

				<PickMusic
					:promiseRes="PickMusicRes"
					@pickMusic="pickMusic"
					@removeMusic="removeMusic"
					@changeMyDH="changeMyDH"
					@changeElVolume="changeElVolume"
					v-show="footerBarListAc == 4"
					:show="myDialogShow"
					:pageItem="footerBarList[footerBarList.findIndex((e) => e.ac == footerBarListAc)]"
					:selectItem="bgm"
				></PickMusic>

				<PickVideo
					:promiseRes="PickVideoRes"
					@pickVideo="pickVideo"
					@changeMyDH="changeMyDH"
					:pageItem="footerBarList[footerBarList.findIndex((e) => e.ac == footerBarListAc)]"
					@removeEl="removeEl"
					@changeZIndex="changeZIndex"
					@changeElVolume="changeElVolume"
					:currInd="scene2CurrInd"
					:scene2="scene2"
					v-show="footerBarListAc == 5"
					:show="myDialogShow"
				></PickVideo>

				<PickText
					ref="PickText"
					:promiseRes="PickTextRes"
					@changeValue="addText"
					@blurValue="blurText"
					:pageItem="footerBarList[footerBarList.findIndex((e) => e.ac == footerBarListAc)]"
					@removeEl="removeEl"
					@changeZIndex="changeZIndex"
					@changeMyDH="changeMyDH"
					@focusValue="focusText"
					:scene2="scene2"
					v-show="footerBarListAc == 6"
					:currInd="scene2CurrInd"
					@changeFont="changeFont"
					@close="closeSomeComp"
					:show="myDialogShow"
				></PickText>

				<PickSubtitles
					ref="PickSubtitles"
					:promiseRes="PickSubtitlesRes"
					@changeValue="addText"
					:pageItem="footerBarList[footerBarList.findIndex((e) => e.ac == footerBarListAc)]"
					@blurValue="blurText"
					:show="myDialogShow"
					@removeEl="removeEl"
					:scene2="scene2"
					@focusValue="focusText"
					@changeFont="changeFont"
					@close="closeSomeComp"
					@changeZIndex="changeZIndex"
					@changeMyDH="changeMyDH"
					:currInd="scene2CurrInd"
					v-show="footerBarListAc == 9"
				></PickSubtitles>
			</MyDialog>

			<ConfirmDialog ref="confirmDialog1" :dialogShow="confirmDialogOpt1.dialogShow" :title="confirmDialogOpt1.title" :cont="confirmDialogOpt1.cont" :btns="confirmDialogOpt1.btns" @cancel="confirmDialogOpt1Cancel" @confirm="confirmDialogOpt1Confirm"></ConfirmDialog>

			<PageLoading :tips="pageLoadingTips" v-if="pageLoading"></PageLoading>

			<view class="texts-kuang" v-if="footerBarListAc == 6 && footerBarList[7].pageAc == 0 && 0" @tap.stop="">
				<view class="kuang-box">
					<view class="ipt-box">
						<image class="icon" :src="imgPath + 'createAvatar/search.svg'" mode="widthFix"></image>
						<input class="ipt" focus @input="iptWatch" @focus="iptFocus" @blur="iptBlur" type="text" ref="kuangIpt" placeholder="搜索您想要的数字人" v-model="kuangIptVal" />
					</view>
					<view class="cancel" @tap="closeSomeComp">
						<view class="text">确定</view>
					</view>
				</view>
			</view>

			<!-- 	<uni-popup ref="popup" type="bottom" background-color="#fff" border-radius="3vw 3vw 0 0">
				<view class="submit-popup">
					<view class="main-form">
						<view class="form-item">
							<view class="label">
								<view class="text">视频名称</view>
								<view class="subText"></view>
							</view>
							<view class="box input-box">
								<input class="text" type="text" placeholder-class="nac" v-model="daochuForm.videoName" :placeholder="'请输入视频名称'" />
							</view>
						</view>
					</view>
					<view class="f">
						<view class="sbt-btn" @tap="submit">提 交</view>
					</view>
				</view>
			</uni-popup> -->

			<uni-popup ref="popup" type="dialog">
				<uni-popup-dialog ref="inputClose" mode="input" title="视频名称" :value="daochuForm.videoName" placeholder="请输入视频名称" @confirm="dialogInputConfirm"></uni-popup-dialog>
			</uni-popup>
			<!-- <view class="keyboard" v-if="systemInfo" :style="{height:'calc('+keyboardH+'px)'}"></view> -->
		</view>
	</view>
</template>
<script>
let components = {};
import { tools } from "@/utils/util.js";

// #ifndef MP
import ConfirmDialog from "@/components/confirm-dialog/confirm-dialog.vue";
import PickTemplate from "./components/PickTemplate/PickTemplate.vue";
import PickAvatar from "./components/PickAvatar/PickAvatar.vue";
import PickSpeaker from "./components/PickSpeaker/PickSpeaker.vue";
import PickBgi from "./components/PickBgi/PickBgi.vue";
import PickPicture from "./components/PickPicture/PickPicture.vue";
import PickMusic from "./components/PickMusic/PickMusic.vue";
import PickVideo from "./components/PickVideo/PickVideo.vue";
import PickText from "./components/PickText/PickText.vue";
import PickSubtitles from "./components/PickSubtitles/PickSubtitles.vue";
import LuYin from "./components/LuYin/LuYin.vue";
import myRequest, * as request from "@/utils/api.js";
import * as api from "@/api/createVideo.js";
import CanvasGif from "@/utils/CanvasGif.js";

let lastRenderTime = 0; // 限定canvas图片更新帧率
const fpsInterval = 1000 / 15; //帧率为15赫兹

// rgba对象转字符串
const rgbaObj2Str = ({ r, g, b, a }) => `rgba(${r},${g},${b},${a})`;
import axios from "axios";

function preventDefault(e) {
	e.preventDefault();
}
components = {
	ConfirmDialog,
	PickTemplate,
	PickAvatar,
	PickSpeaker,
	PickBgi,
	PickPicture,
	PickMusic,
	PickVideo,
	PickText,
	PickSubtitles,
	LuYin
};
// #endif

const requestAnimationFrame =
	window?.requestAnimationFrame ||
	window?.webkitRequestAnimationFrame ||
	window?.mozRequestAnimationFrame ||
	window?.oRequestAnimationFrame ||
	window?.msRequestAnimationFrame ||
	function (callback) {
		setTimeout(callback, 1000 / 60);
	};

export default {
	data() {
		return {
			imgPath: tools.imgPath,
			getEnv: { native: true },
			initMountedTimer: null,
			pickAvatarYusheSize: 8,
			compGetDataSuccess: false,
			uploadFileSize: 200,
			subtitlesShow: false,
			webStyle: {
				height: ""
			},
			audioSrc: "",
			LuYinShow: false,
			keyboardH: 0,
			kuangIptVal: "",
			confirmDialogOpt1: {
				dialogShow: false,
				title: "选择模板",
				cont: "此操作将覆盖全部场景, 是否继续?",
				btns: [
					{
						text: "取消",
						fnName: "cancel",
						args: []
					},
					{
						text: "确定",
						fnName: "confirm",
						args: []
					}
				]
			},
			urlParams: "",
			bgm: {},
			speaker: {},
			PickSubtitlesRes: null,
			PickTextRes: null,
			PickVideoRes: null,
			PickPictureRes: null,
			PickMusicRes: null,
			PickBgiRes: null,
			PickAvatarRes: null,
			changedTouches: [],
			touchesElList: [],
			ctx: null,
			pageLoadingTips: undefined,
			pageLoading: false,
			showText: "",
			winH: 0,
			footerBarShow: true,
			myDialogH: 68,
			myDialogB: 15,
			myDialogZ: 100,
			myDialogShow: false,
			myDialogStyle: {},
			footerBarListAc: 0,
			footerBarList: [
				{
					ac: 8,
					icon: "template",
					type: "template",
					text: "模板",
					pageAc: 0
				},
				{
					ac: 1,
					icon: "avatar",
					type: "avatar",
					text: "数字人",
					pageAc: 0
				},
				{
					ac: 7,
					icon: "speaker",
					type: "speaker",
					text: "配音"
				},
				{
					ac: 2,
					icon: "bgi",
					type: "bgi",
					text: "背景"
				},
				{
					ac: 3,
					icon: "picture",
					type: "photo",
					text: "插图"
				},
				{
					ac: 4,
					icon: "music",
					type: "music",
					text: "音乐"
				},
				{
					ac: 5,
					icon: "video",
					type: "video",
					text: "视频"
				},
				{
					ac: 6,
					icon: "text",
					type: "texts",
					text: "文字",
					pageAc: 0
				},
				{
					ac: 9,
					icon: "subtitles",
					type: "texts2",
					text: "字幕",
					pageAc: 0
				}
			],
			showBoxStyle: {},
			oldShowBoxStyle: {},
			workShowH: "",
			systemInfo: {},
			oldSystemInfo: {},
			content: "",
			focusContent: false,
			yuliaoTabbarInd: 0,
			yuliaoTabbarList: [
				{
					text: "文本驱动"
				},
				{
					text: "音频驱动"
				}
			],
			changjing_show_box_class: ["show-box"],
			changjingAc: -1,
			changjing: [],
			changjingInitSucc: false,
			pageReObs: null,
			workShowReObs: null,
			chicunAc: 2,
			chicunList: [
				{
					id: 1,
					size: "16:9",
					resolution: "1920*1080",
					className: "chicun-16-9"
				},
				{
					id: 2,
					size: "9:16",
					resolution: "1080*1920",
					className: "chicun-9-16"
				},
				{
					id: 3,
					size: "1:1",
					resolution: "1080*1080",
					className: "chicun-1-1"
				}
			],
			scene2: [],
			scene2CurrInd: null,
			arcRadius: 12,
			daochuForm: {
				videoName: "未命名项目",
				videoRatio: "1080p"
			},
			AudioManStyleData: [],
			AudioManStyleAc: -1,
			homeDetailInfo: {},
			getVirtualcoinrationData: {},
			surplusTime: "00:00",
			webBottomStyle: {}
		};
	},
	methods: {
		//打开弹出层
		openPop() {
			this.$refs.popup.open();
		},
		//上传文件api
		async getOSSApi_new(ossData, file, name) {
			const that = this;
			let res = ossData;

			function getUUID() {
				let keyStr = "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx";
				keyStr = "xxxxxxxx-6xxx";
				return keyStr.replace(/[xy]/g, (c) => {
					return (c === "x" ? (Math.random() * 16) | 0 : "r&0x3" | "0x8").toString(16);
				});
			}
			const formData = new FormData();
			let url_name = "https://alleymall.oss-cn-guangzhou.aliyuncs.com";
			let key = res.data.dir + "/" + getUUID() + name;
			formData.append("policy", res.data.policy);
			formData.append("signature", res.data.signature);
			formData.append("ossaccessKeyId", res.data.accessid);
			formData.append("key", key);
			formData.append("dir", res.data.dir);
			formData.append("host", res.data.host);
			formData.append("expire", res.data.expire);
			formData.append("callback", res.data.callback);
			// formData.append('type', res.data.callback)
			formData.append("file", file);

			return axios
				.post(url_name, formData, {
					headers: {
						"Content-Type": "multipart/form-data"
					}
				})
				.then((response) => {
					let src = url_name + "/" + key;
					// console.log(src);
					// that.audioPlayerSrc = src;
					// console.log(response);
					return {
						...response,
						src
					};
				})
				.catch((error) => {
					console.log("上传文件api", error);
				});
		},

		// 跳转购买页面
		toBuyPage() {
			this.toPage("/pages/buy/buy");
		},
		// 添加音频驱动
		addAudioSrc(src) {
			this.audioSrc = src;
		},
		// 切换字幕显示
		changeSubtitlesShow(e) {
			this.subtitlesShow = e.detail.value;
		},
		// 删除音频驱动
		delAudioSrc() {
			const that = this;
			uni.showModal({
				title: "提示",
				content: "确定删除音频吗？",
				success: function (res) {
					if (res.confirm) {
						that.audioSrc = "";
					} else if (res.cancel) {
					}
				}
			});
		},
		// confirmDialogOpt1取消
		confirmDialogOpt1Cancel(item, index) {
			this.confirmDialogOpt1.dialogShow = false;
			this.confirmDialogOpt1.btns.map((e) => {
				e.args = [];
			});
		},
		// confirmDialogOpt1确定
		confirmDialogOpt1Confirm(item, index) {
			this.confirmDialogOpt1.dialogShow = false;
			this.pickTemplate(item, index);
		},
		// 显示confirmDialogOpt1
		showConfirmDialogOpt1(item, index) {
			this.confirmDialogOpt1.dialogShow = true;
			this.confirmDialogOpt1.btns.map((e) => {
				e.args = [item, index];
			});
		},
		// 返回上一页
		back() {
			let web = uni.getStorageSync("web");
			if (web == 1) {
				uni.reLaunch({
					url: "/pages/index/index"
				});
			} else {
				let res = this.getEnv;
				if (res.miniprogram || res.plus) {
					uni.webView.reLaunch({
						url: "/pages/index/index"
					});
				}
			}
		},
		// 跳转页面
		toPage(path) {
			let web = uni.getStorageSync("web");
			if (web == 1) {
				uni.navigateTo({
					url: path
				});
			} else {
				uni.webView.navigateTo({
					url: path
				});
			}
		},
		// wx接收内嵌web页面的信息
		wxGetMsg(event) {
			event.detail.data.map((msgData, ind) => {
				switch (msgData.type) {
					case "submitSuccess":
						uni.setStorageSync("toHome", {
							footerBarListAc: 3
						});
						break;
				}
			});
		},

		// 秒转`${m}分钟${s}秒`
		seconds2Time(seconds) {
			let s = Math.floor(seconds % 60);
			let m = Math.floor(seconds / 60);
			return `${m ? m + "分钟" : ""}${+s ? s + "秒" : ""}`;
		},

		// 秒转`${m}:${s}`
		seconds2Time2(seconds) {
			let s = Math.floor(seconds % 60);
			let m = Math.floor(seconds / 60);
			return `${m ? m + ":" : ""}${+s ? s + "" : ""}`;
		},

		// 终端个人详情页
		getHomeDetailInfoApi() {
			return api.getHomeDetailInfo().then((res) => {
				if (!res) return;
				if (!res.data) res.data = {};
				this.homeDetailInfo = res.data;
				if (this.homeDetailInfo.rightList) {
					let duanshipinIndex = this.homeDetailInfo.rightList.findIndex((e) => e.id == "1");
					let jinbiIndex = this.homeDetailInfo.rightList.findIndex((e) => e.id == "1741564651566090455");
					this.homeDetailInfo.rightList[duanshipinIndex].totalRightBalance = this.homeDetailInfo.rightList[duanshipinIndex].totalRightBalance / 1000;
					console.log("终端个人详情页", duanshipinIndex, this.homeDetailInfo.rightList[duanshipinIndex]);
					this.homeDetailInfo.rightList[duanshipinIndex].totalRightBalanceGold = this.homeDetailInfo.rightList[jinbiIndex].totalRightBalance;
					this.homeDetailInfo.rightList[duanshipinIndex].totalRightBalanceTips = `约${(
						((this.homeDetailInfo.rightList[duanshipinIndex].totalRightBalanceGold / this.getVirtualcoinrationData[duanshipinIndex].proportionSource / this.getVirtualcoinrationData[duanshipinIndex].proportionTarget) * 1000) /
						60
					).toFixed(1)}分钟视频`;
					this.homeDetailInfo.rightList[duanshipinIndex].totalRightBalanceStr = this.seconds2Time(this.homeDetailInfo.rightList[duanshipinIndex].totalRightBalance) || `0分钟`;
					this.surplusTime = this.seconds2Time2(this.homeDetailInfo.rightList[0].totalRightBalance);
					return true;
				}
			});
		},
		//获取所有 权益：金币 比例
		getVirtualcoinrationAllApi() {
			return api.getVirtualcoinrationAll().then((res) => {
				if (!res) return;
				this.getVirtualcoinrationData = res.data;
				return true;
			});
		},
		// 导出弹框
		dialogInputConfirm(val) {
			this.daochuForm.videoName = val;
			this.submit();
		},
		// 导出视频
		async submit() {
			const that = this;
			console.log(this.changjing);

			function base64ToFile(base64, fileName) {
				let arr = base64.split(",");
				// let mime = arr[0].match(/:(.\*?);/)[1];
				let bstr = atob(arr[1]);
				let n = bstr.length;
				let u8arr = new Uint8Array(n);
				while (n--) {
					u8arr[n] = bstr.charCodeAt(n);
				}
				return new File([u8arr], fileName, {
					type: "image/png"
				});
			}

			function objectURLToBlob(url, callback) {
				const http = new XMLHttpRequest();
				http.open("GET", url, true);
				http.responseType = "blob";
				http.onload = function (e) {
					if (this.status == 200 || this.status === 0) {
						callback(this.response);
					}
				};
				http.send();
			}

			let changjingInd = -1;
			let dontSubmit = this.changjing.some((e, i) => {
				let isHaveAvatar = e.scene2.some((scene2El) => {
					return scene2El.eleType == "avatar";
				});
				if (!isHaveAvatar) {
					tools.easyToast("请选择数字人！");
					changjingInd = i;
					return true;
				}
				let tempStr = e.content.replace(/\s/g, "").replace(/[^a-zA-Z0-9(\u4e00-\u9fa5)]/g, "");
				let isEnoughFont = tempStr.length >= 20;
				if (!e.audioSrc && !isEnoughFont) {
					tools.easyToast("至少输入20个文字！不包括标点符号");
					changjingInd = i;
					return true;
				}
			});
			if (dontSubmit) {
				this.changeChangjing(changjingInd, true);
				return;
			}
			that.pageLoadingTips = "导出中，请稍后...";
			that.pageLoading = false;
			let showBoxRef = await tools.getNode(uni, ".show-box");
			let sceneVal = {
				width: showBoxRef.width,
				height: showBoxRef.height
			};
			// 计算导出视频宽高
			let videoRatio = {};
			switch (that.daochuForm.videoRatio) {
				case "1080p":
					const chicunListItem = that.chicunList.find((e) => that.chicunAc == e.id);
					videoRatio = ((chicunListItem) => {
						// console.log(chicunListItem);
						let [width, height] = chicunListItem.resolution.split("*");
						return {
							width,
							height
						};
					})(chicunListItem);
					break;
				case "720p":
					videoRatio = that.isPortrait
						? {
								width: 720,
								height: 1280
						  }
						: {
								width: 1280,
								height: 720
						  };
					break;
				default:
					break;
			}

			function calcSize(field, size) {
				//计算后端视频合成大小(px)
				return (videoRatio[field] * size) / sceneVal[field];
			}
			// 获取视频名称
			let videoName = that.daochuForm.videoName;

			// 保存当前未保存的场景
			// this.changeChangjing(this.changjingAc, true);

			// 生成视频
			let canSubmit = true;
			let items = [];
			try {
				items = that.changjing.map(async (e, i) => {
					return new Promise(async (resolve, reject) => {
						let tempObj = {};
						let detailList = [];
						let stopTime = 0;
						let captionsArr = null;
						if (!e.audioSrc) {
							//文本驱动
							const magicSpeakerId = e.speaker?.thirdpartyId;
							let avatarInd = e.scene2.findIndex((e) => e.eleType == "avatar");
							let speaker = magicSpeakerId ? magicSpeakerId : "jupiter_BV406";
							let content = e.content.replace(/\'/g, `'\\''`);

							let ttsRes = await api.postAudioTTS({
								speaker: speaker,
								text: content,
								speed: e.scene2[avatarInd]?.speed ?? 1,
								pitch: e.scene2[avatarInd]?.pitch ?? 0,
								volume: e.scene2[avatarInd]?.volume ?? 100
							});

							if (!ttsRes || !ttsRes.data) {
								that.pageLoading = false;
								tools.easyToast("ttsRes && 合成失败！请重试~");
								return (canSubmit = false);
							}
							// stopTime = await tools.setVideoSrc(ttsRes.data);
							
							stopTime = await new Promise(async (res) => {
								let time = await api.getDuration({
									lca: ttsRes.data
								});
								console.log('stopTime',time);
								if (!time || !time.data) res(false);
								res(time.data / 1000);
							});
							if (!stopTime) {
								that.pageLoading = false;
								tools.easyToast("stopTime && 合成失败！请重试~");
								return (canSubmit = false);
							}
							
							//更新字幕数据
							let time = stopTime * 1000;
							let subtitleData = await api.getCaptionsOfUrl2({
								fileName: parseInt(time),
								// format: 'MP3'
								text: content
							});
							captionsArr = JSON.parse(subtitleData.data)?.flash_result?.sentences;
							if (!captionsArr) {
								that.pageLoading = false;
								tools.easyToast("合成失败！请重试~");
								return (canSubmit = false);
							}
							let texts2Val = e.scene2.find((val) => val.eleType == "texts2");
							if (texts2Val) {
								// 获取字幕宽高
								captionsArr = await Promise.all(
									captionsArr.map((e) => {
										return new Promise((resolve) => {
											let textSize = this.getTextSize(e.text, texts2Val.sand, 1);
											resolve({
												...e,
												...textSize
											});
										});
									})
								);
							}

							detailList.push({
								content: content,
								wetaSpeakerId: ttsRes.data,
								contentType: "text",
								magicSpeakerId: speaker,
								speed: e.scene2[avatarInd]?.speed ?? 1,
								pitch: e.scene2[avatarInd]?.pitch ?? 0,
								audioType: 0
							});
						} else {
							stopTime = await tools.setVideoSrc(e.audioSrc);
							//音频驱动
							detailList.push({
								content: e.audioSrc,
								contentType: "audio",
								wetaSpeakerId: e.audioSrc
							});
						}
						e.scene2.map((item) => {
							let detailListItem = {};
							detailListItem.contentType = item.eleType;
							detailListItem.startTime = 0;
							detailListItem.stopTime = stopTime * 1000;
							switch (detailListItem.contentType) {
								case "avatar":
									detailListItem.wetaSpeakerId = item.id;
									detailListItem.volume = item.volume ?? 100;
									detailListItem.content = item.speakerId;
									detailListItem.italic = "Y";
									console.log("item.lsLocalhost", item.lsLocalhost);
									if (item.lsLocalhost == 1) {
										detailListItem.driverType = "l_hm";
									}
									// if (Math.floor(detailListItem.stopTime -
									// 		detailListItem.startTime) == Math.floor(ele
									// 		.matterValue * 1000)) { //不拖动时长
									// 	detailListItem.italic = 'Y';
									// } else { //拖动时长
									// 	detailListItem.italic = 'N';
									// };
									break;
								case "bgi":
								case "photo":
									detailListItem.contentType = "picture";
									detailListItem.content = item.matterUrl;
									break;
								case "video":
									detailListItem.contentType = "backvideo";
									detailListItem.content = item.matterUrl;
									detailListItem.volume = item.volume ?? 10;
									break;
								case "texts":
									detailListItem.contentType = "title";
									detailListItem.text = item.content;
									// detailListItem = { ...detailListItem, ...item.sand };
									// detailListItem.fontType = 'simsun.ttc';//字体类型
									detailListItem.fontType = item.sand.fontname; //字体类型
									detailListItem.backgroundColor = item.sand.bgStyle.slice(0, -2); //字体背景颜色
									detailListItem.fontBackTransparency = (parseInt(item.sand.bgStyle.slice(-2), 16) / 255).toFixed(2); //字体背景透明度
									// detailListItem.fontSize = item.sand.fontsize;//文本类型的字体大小
									detailListItem.fontSize = calcSize("height", item.sand.fontsize); //文本类型的字体大小
									detailListItem.fontColor = item.sand.primaryColour.slice(0, -2); //字体颜色
									detailListItem.fontTransparency = (parseInt(item.sand.primaryColour.slice(-2), 16) / 255).toFixed(2); //字体透明度;
									detailListItem.outlineColor = item.sand.strokeStyle.slice(0, -2); //描边颜色
									detailListItem.outlineTransparency = (parseInt(item.sand.strokeStyle.slice(-2), 16) / 255).toFixed(2); //描边透明度
									detailListItem.outlineSize = item.sand.lineWidth; //描边大小
									break;
								case "texts2":
									if (!e.audioSrc && this.subtitlesShow) {
										// console.log("texts2",captionsArr)
										captionsArr.map((captions, captionsind) => {
											let texts2Item = {};
											let x = (sceneVal.width - captions.textWidth) / 2;
											texts2Item.contentType = "subtitletext";
											texts2Item.startTime = +captions.begin_time;
											texts2Item.stopTime = +captions.end_time;
											texts2Item.text = captions.text;
											texts2Item.fontType = item.sand.fontname; //字体类型
											texts2Item.backgroundColor = item.sand.bgStyle.slice(0, -2); //字体背景颜色
											texts2Item.fontBackTransparency = (parseInt(item.sand.bgStyle.slice(-2), 16) / 255).toFixed(2); //字体背景透明度
											texts2Item.fontSize = calcSize("height", item.sand.fontsize); //文本类型的字体大小
											texts2Item.fontColor = item.sand.primaryColour.slice(0, -2); //字体颜色
											texts2Item.fontTransparency = (parseInt(item.sand.primaryColour.slice(-2), 16) / 255).toFixed(2); //字体透明度;
											texts2Item.outlineColor = item.sand.strokeStyle.slice(0, -2); //描边颜色
											texts2Item.outlineTransparency = (parseInt(item.sand.strokeStyle.slice(-2), 16) / 255).toFixed(2); //描边透明度
											texts2Item.outlineSize = item.sand.lineWidth; //描边大小
											texts2Item.width = calcSize("height", captions.textWidth);
											texts2Item.height = calcSize("height", captions.textHeight);
											texts2Item.x = calcSize("height", x);
											texts2Item.y = calcSize("height", item.y);
											[1920, 1080].map((e) => {
												texts2Item.width = texts2Item.width == e ? texts2Item.width + 2 : texts2Item.width;
												texts2Item.height = texts2Item.height == e ? texts2Item.height + 2 : texts2Item.height;
											});
											texts2Item.sortNum = item.z + 1;
											detailList.push(texts2Item);
										});
									}
									break;
								default:
									break;
							}
							if (detailListItem.contentType != "back_audio") {
								detailListItem.x = calcSize("height", item.x);
								detailListItem.y = calcSize("height", item.y);
								detailListItem.width = calcSize("height", item.w);
								detailListItem.height = calcSize("height", item.h);
								[1920, 1080].map((e) => {
									detailListItem.width = detailListItem.width == e ? detailListItem.width + 2 : detailListItem.width;
									detailListItem.height = detailListItem.height == e ? detailListItem.height + 2 : detailListItem.height;
								});
								detailListItem.sortNum = item.z + 1;
							}
							if (detailListItem.contentType != "texts2") {
								detailList.push(detailListItem);
							}
						});
						if (e.bgm?.matterUrl) {
							let detailListItem = {};
							detailListItem.startTime = 0;
							detailListItem.stopTime = stopTime * 1000;
							detailListItem.contentType = "back_audio";
							detailListItem.content = e.bgm.matterUrl;
							detailListItem.volume = e.bgm.volume ?? 10;
							detailList.push(detailListItem);
						}
						tempObj.detailList = detailList.map((detail) => {
							return {
								...detail,
								sortNum: /\d/.test(detail.sortNum) ? detail.sortNum : null
							};
						});
						resolve(tempObj);
					});
				});

				let allRes = await Promise.all(items);
				items = allRes;
			} catch (error) {
				//TODO handle the exception
				console.error(error);
				tools.easyToast("导出失败！");
				this.pageLoading = false;
				return;
			}
			let coverUrl = "https://alleymall.oss-cn-guangzhou.aliyuncs.com/2023-12-30/598c4b44-6b09思维认知封面2.png";
			this.secne2CanvasPic();
			let file = await new Promise((resolve) => {
				objectURLToBlob(that.changjing[this.changjingAc].scene2Url, function (blob) {
					resolve(
						new window.File([blob], "fengmian.png", {
							type: blob.type
						})
					);
				});
			});
			let ossData = await api.postOSS();
			let ress = await this.getOSSApi_new(ossData, file, "fengmian.png");
			if (!ress) {
				return;
			}
			console.log("封面", ress.src);
			coverUrl = ress.src;

			let sand = {
				height: videoRatio.height,
				name: videoName,
				width: videoRatio.width,
				coverUrl: coverUrl,
				items: items,
				videoExpedite: 1
			};
			console.log(sand);
			if (!canSubmit) {
				console.log("unSubmit");
				return;
			}
			let res = await myRequest("/thirdparty/video/video/compound/three", sand, "post");
			console.log(res);
			that.pageLoading = false;
			if (!res) return;
			let waitTime = 1500;

			let web = uni.getStorageSync("web");
			if (web == 1) {
				await tools.easyToast("导出成功！", "success");
				uni.setStorageSync("toHome", {
					footerBarListAc: 3
				});
				setTimeout(() => {
					uni.reLaunch({
						url: "/pages/index/index"
					});
				}, waitTime);
			} else {
				uni.webView.postMessage({
					data: {
						type: "submitSuccess"
					}
				});
				tools.easyToast("导出成功！", "success");

				setTimeout(() => {
					uni.webView.reLaunch({
						url: "/pages/index/index"
					});
				}, waitTime);
			}
			return;
		},
		// 画布触碰事件
		canvasdown(event) {
			// console.log('canvasdown',event);
			// 阻止默认行为
			document.body.addEventListener("touchmove", preventDefault, {
				passive: false
			});
			// 获取初始触碰坐标
			let { x: offsetX, y: offsetY } = event.changedTouches[0];

			// 缓存初始触碰坐标
			this.changedTouches = event.changedTouches;

			let rect1 = {
				//Touch坐标，可以看成质点
				offsetWidth: 0,
				offsetHeight: 0,
				offsetLeft: offsetX,
				offsetTop: offsetY
			};
			// 缓存被触碰的画布元素集合
			// this.touchesElList = JSON.parse(JSON.stringify(this.scene2)).reduceRight((p, e, i, s) => {
			this.touchesElList = this.scene2.reduceRight((p, e, i, s) => {
				let offsetVal = 0; //设置文字偏移量(uniapp框架BUG,渲染文字位置有误)
				if (e.eleType == "texts") {
					offsetVal = /* e.h */ 0;
				}
				//判断当前点击的画布元素
				let react2 = {
					// 获取矩形区域
					offsetLeft: e.x - this.arcRadius,
					offsetTop: e.y - this.arcRadius - offsetVal,
					offsetWidth: e.w + 2 * this.arcRadius,
					offsetHeight: e.h + 2 * this.arcRadius
				};
				// 判断是否锁定元素大小和位置
				let lockSize = false; //锁定元素大小
				let lockPos = false; //锁定元素位置
				if (e.eleType == "bgi") {
					//背景锁定
					lockSize = true;
					lockPos = true;
				}

				// 判断Touch坐标是否在矩形区域内
				let flag = tools.isCollision_rect(rect1, react2);

				if (flag) {
					let pEl = {
						el: e,
						ind: i,
						type: "changePosition",
						lockSize,
						lockPos,
						offsetVal
					};
					// e.y -= offsetVal;
					const pointInd = [
						// 操作点
						[e.x, e.y], //左上
						[e.x + e.w, e.y], //右上
						[e.x + e.w, e.y + e.h], //右下
						[e.x, e.y + e.h] //左下
					].findIndex((point, pointInd) => {
						let react3 = {
							offsetLeft: point[0] - this.arcRadius,
							offsetTop: point[1] - this.arcRadius - offsetVal,
							offsetWidth: 2 * this.arcRadius,
							offsetHeight: 2 * this.arcRadius
						};
						let flag2 = tools.isCollision_rect(rect1, react3);
						if (flag2) {
							pEl.type = "changeSize";
							pEl.pointInd = pointInd;
							return true;
						}
					});
					p.push(pEl);
				}
				return p;
			}, []);
		},
		// 画布滑动事件
		canvasmove(event) {
			event.preventDefault();
			// console.log('canvasmove',event);
			// 获取鼠标坐标
			let offsetX = event.changedTouches[0].x;
			let offsetY = event.changedTouches[0].y;

			// 计算滑动距离
			let prevX = this.changedTouches[0].x;
			let prevY = this.changedTouches[0].y;
			let calcX = offsetX - prevX;
			let calcY = offsetY - prevY;

			// 获取被触碰的画布元素
			let touchesEl = this.touchesElList[0];
			this.scene2CurrInd = this.touchesElList[0]?.ind;
			// let scene2 = JSON.parse(JSON.stringify(this.scene2));
			let scene2 = this.scene2.map((e) => {
				return {
					x: e.x,
					y: e.y,
					w: e.w,
					h: e.h
				};
			});
			if (touchesEl) {
				// 有元素，则移动或者缩放
				//获取元素的原始数据
				const elx = touchesEl.el.x;
				const ely = touchesEl.el.y;
				const elw = touchesEl.el.w;
				const elh = touchesEl.el.h;
				const elfs = touchesEl.el.sand?.fontsize;

				//计算元素的宽高比
				const aspectRatio = elw / elh;

				switch (touchesEl.type) {
					case "changePosition": // 元素移动
						if (touchesEl.lockPos) break;
						scene2[touchesEl.ind].x = elx + calcX;
						scene2[touchesEl.ind].y = ely + calcY;
						break;
					case "changeSize": // 元素缩放
						if (touchesEl.lockSize) break;
						switch (touchesEl.pointInd) {
							case 0: // 元素缩放(左上)(需改x,y坐标)(先改x坐标，然后通过新旧h差值算出y坐标)
								// scene2[touchesEl.ind].x = elx + calcX;
								// scene2[touchesEl.ind].w = elw - calcX;
								// scene2[touchesEl.ind].h = scene2[touchesEl.ind].w * (1 / aspectRatio);
								// const calcElH = elh - scene2[touchesEl.ind].h; //新旧h差值
								// scene2[touchesEl.ind].y = ely + calcElH;
								break;
							case 1: // 元素缩放(右上)(需改y坐标)
								scene2[touchesEl.ind].y = ely + calcY;
								scene2[touchesEl.ind].h = elh - calcY;
								scene2[touchesEl.ind].w = scene2[touchesEl.ind].h * aspectRatio;
								break;
							case 2: // 元素缩放(右下)(不用改x,y坐标)
								scene2[touchesEl.ind].w = elw + calcX;
								scene2[touchesEl.ind].h = scene2[touchesEl.ind].w * (1 / aspectRatio);
								break;
							case 3: // 元素缩放(左下)(需改x坐标)
								scene2[touchesEl.ind].x = elx + calcX;
								scene2[touchesEl.ind].w = elw - calcX;
								scene2[touchesEl.ind].h = scene2[touchesEl.ind].w * (1 / aspectRatio);
								break;
						}

						//计算字体元素大小
						if (elfs) {
							const ratio = scene2[touchesEl.ind].w / elw;
							scene2[touchesEl.ind].sand = JSON.parse(JSON.stringify(this.scene2[touchesEl.ind].sand));
							scene2[touchesEl.ind].sand.fontsize = Math.floor(elfs * Math.abs(ratio));
						}

						break;
				}

				// 设置元素最短长度
				if (scene2[touchesEl.ind].w < 5 || scene2[touchesEl.ind].h < 5) {
					return;
				}
				this.scene2 = scene2.map((e, i) => {
					return {
						...this.scene2[i],
						...e
					};
				});
			} else {
				//无元素
			}
		},
		// 画布滑动结束事件
		canvasup(event) {
			console.log(JSON.parse(JSON.stringify(this.touchesElList[0])));
			let { pointInd, type, ind } = this.touchesElList[0] || {};
			if (type == "changeSize" && pointInd === 0) {
				if (this.scene2[this.scene2CurrInd]) {
					if (this.scene2[this.scene2CurrInd].eleType == "avatar") {
						tools.easyToast("无法删除数字人！");
					} else {
						this.removeEl(this.scene2CurrInd);
					}
				} else {
					this.scene2CurrInd = null;
				}
			} else {
				//选中和取消选中效果实现
				if (this.scene2CurrInd === this.touchesElList[0]?.ind) {
					this.scene2CurrInd = null;
					this.myDialogShow = false;
					this.footerBarListAc = 0;
				} else {
					this.scene2CurrInd = this.touchesElList[0]?.ind ?? null;
					if (this.scene2CurrInd === null) {
						this.myDialogShow = false;
						this.footerBarListAc = 0;
					} else {
						let eleType = this.scene2[this.scene2CurrInd]?.eleType;
						let footerBarListInd = this.footerBarList.findIndex((e) => e.type == eleType);
						let footerBarItem = this.footerBarList[footerBarListInd];
						footerBarItem.pageAc = 1;
						this.showMyDialog(footerBarItem, 16);
					}
				}
			}
			// 恢复默认行为
			document.body.removeEventListener("touchmove", preventDefault, {
				passive: false
			});
			let { x: offsetX, y: offsetY } = event.changedTouches[0];
			this.touchesElList = [];
			// 更新场景
			// this.updateChangjing(this.changjingAc, true);
		},
		// 修改文字
		async changeFont(payload) {
			let scene2 = this.scene2[payload.currInd];
			if (!scene2) return;
			let obj = JSON.parse(JSON.stringify(scene2));
			switch (payload.type) {
				case "changeFont": //修改文字
					obj.sand.fontname = payload.item.fontFile;
					obj.sand.fontFamily = payload.item.fontName;
					break;
				case "changeFontsize": //修改文字大小
					obj.sand.fontsize = payload.item;
					break;
				case "changeFontLineSize": //修改文字描边大小
					obj.sand.lineWidth = payload.item;
					break;
				case "changeTextAlignListAc": //修改文字对齐方式
					let showBoxinfo = await tools.getNode(uni, ".show-box");
					let sW = showBoxinfo.width;
					let sH = showBoxinfo.height;
					switch (payload.item) {
						case 0:
							obj.x = 0;
							break;
						case 1:
							obj.x = (sW - obj.w) / 2;
							break;
						case 2:
							obj.x = sW - obj.w;
							break;
					}
					break;
				case "changeFontColor": //修改文字颜色
					// console.log('修改文字颜色', payload.item);
					let { r, g, b, a } = payload.item.val;
					switch (payload.item.field) {
						case "fontColor": //字体颜色
							obj.sand.primaryColour = tools.rgbToHex(r, g, b, a * 255);
							obj.sand.primaryColourVal = payload.item.val;
							break;
						case "fontBgColor": //背景颜色
							obj.sand.bgStyle = tools.rgbToHex(r, g, b, a * 255);
							obj.sand.bgStyleVal = payload.item.val;
							break;
						case "fontLineColor": //描边颜色
							obj.sand.strokeStyle = tools.rgbToHex(r, g, b, a * 255);
							obj.sand.strokeStyleVal = payload.item.val;
							break;
					}
					// obj.sand.fontsize = payload.item;
					break;
				case "changeFontContent": //修改文字内容
					this.footerBarList[7].pageAc = 0;
					this.$nextTick(() => {
						this.kuangIptVal = this.scene2[this.scene2CurrInd].content;
					});
					break;
				default:
					break;
			}
			let res = this.getTextSize(obj.content, obj.sand, 1);
			obj.w = res.textWidth;
			obj.h = res.textHeight + 16;
			this.scene2[payload.currInd] = obj;
		},
		// 失焦事件
		blurText(value) {
			this.footerBarShow = true;
			if (value == "") {
				if (this.scene2CurrInd == null) return;
				this.scene2.splice(this.scene2CurrInd, 1);
				this.scene2CurrInd = null;
			} else {
				let item = this.scene2[this.scene2CurrInd];
				item.w = this.ctx.measureText(item.content).width;
			}
		},
		// 聚焦事件
		async focusText(value) {
			this.footerBarShow = false;
			if (this.scene2[this.scene2CurrInd]?.eleType != "texts") {
				let content = value || "默认文本";
				let showBoxinfo = await tools.getNode(uni, ".show-box");
				let sW = showBoxinfo.width;
				let sH = showBoxinfo.height;
				const fn = (hex) => tools.hexToRgb(hex);
				let obj = {
					eleType: "texts",
					content: content,
					isText: true,
					lockSize: true,
					sW,
					sH,
					sand: {
						letterSpacing: "0",
						fontname: "alishuheiti.ttf",
						fontFamily: "速黑体",
						primaryColour: "#ffffffff",
						primaryColourVal: fn("#ffffffff"),
						fontsize: 20,
						lineWidth: 2,
						strokeStyle: "#000000ff",
						strokeStyleVal: fn("#000000ff"),
						bgStyle: "#ffffff00",
						bgStyleVal: fn("#ffffff00"),
						alignAc: 1
					}
				};
				let res = this.getTextSize(content, obj.sand, 1);
				obj.w = res.textWidth;
				obj.h = res.textHeight + 16;
				obj.x = (sW - obj.w) / 2;
				obj.y = (sH - obj.h) / 2;
				/* // this.ctx.font = 'italic bold 40px'
					this.ctx.setFontSize(obj.sand.fontsize);
					obj.w = this.ctx.measureText(content).width;
					obj.h = obj.sand.fontsize;
					obj.x = (sW - obj.w) / 2;
					obj.y = (sH - obj.h) / 2; */

				this.scene2.push(obj);
				this.scene2CurrInd = this.scene2.length - 1;
				this.updateElZIndex();
			} else {
				console.log("编辑文本");
			}
		},
		// 添加文本
		addText(value) {
			if (this.scene2[this.scene2CurrInd]?.eleType != "texts") {
				let obj = this.scene2.at(-1);
				obj.content = value;
				let res = this.getTextSize(value, obj.sand, 1);
				obj.w = res.textWidth;
				obj.h = res.textHeight + 16;
				obj.x = (obj.sW - obj.w) / 2;
				obj.y = (obj.sH - obj.h) / 2;
			} else {
				//编辑
				let obj = this.scene2.at(this.scene2CurrInd);
				obj.content = value;
				let res = this.getTextSize(value, obj.sand, 1);
				obj.w = res.textWidth;
				obj.h = res.textHeight + 16;
			}
		},
		// 文字聚焦
		iptFocus(e) {
			this.footerBarShow = false;
			this.myDialogShow = false;
			this.focusText(e.detail.value);
		},
		// 文字失焦
		iptBlur(e) {
			this.kuangIptVal = "";
			this.footerBarShow = true;
		},
		// 监听文字内容改变
		iptWatch(e) {
			this.addText(e.detail.value);
		},
		// 选择模板
		pickTemplate(item, index) {
			uni
				.request({
					url: item.matterUrl
				})
				.then((res) => {
					if (!res) return;
					this.changjing = [];
					this.changjingInitSucc = false;
					this.restoreChangjing(res.data);
					this.updateDataOfChangjing(this.changjing[0]);
					setTimeout(() => {
						this.changjingInitSucc = true;
					}, 1520);
				});
		},
		// 选择音乐
		async pickMusic({ item, index }) {
			this.bgm = item;
		},
		// 删除音乐
		removeMusic() {
			this.bgm = {};
		},
		// 选择视频
		async pickVideo({ item, index }) {
			let showBoxinfo = await tools.getNode(uni, ".show-box");
			let sW = showBoxinfo.width;
			let sH = showBoxinfo.height;
			// let scene2 = JSON.parse(JSON.stringify(this.scene2));

			let scene2 = this.scene2;

			// 获取图片信息
			let imgDom = {};
			let imageInfo = await new Promise((resolve) => {
				uni.getImageInfo({
					src: item.picSrc,
					success(res) {
						resolve(res);
					},
					fail(err) {
						console.log("获取图片信息", err);
						resolve(false);
					}
				});
			});
			if (!imageInfo) {
				tools.easyToast("解析图片出错！");
				return;
			}
			let imgW = imageInfo.width;
			let imgH = imageInfo.height;
			let whR = imgW / imgH; //宽高比
			// 竖屏
			if (imgW == imgH) {
				//等宽高
				imgDom = {
					naturalWidth: sW,
					naturalHeight: sW
				};
			} else if (imgH > imgW) {
				//高长
				imgDom.naturalHeight = sH;
				imgDom.naturalWidth = sH * whR;
			} else {
				//宽长
				imgDom.naturalWidth = sW;
				imgDom.naturalHeight = sW / whR;
			}
			let temp = {
				...item,
				eleType: "video",
				x: (sW - imgDom.naturalWidth) / 2,
				y: (sH - imgDom.naturalHeight) / 2,
				w: imgDom.naturalWidth,
				h: imgDom.naturalHeight,
				z: null
			};
			let resData = await CanvasGif({
				url: temp.picSrc,
				x: temp.x,
				y: temp.y,
				w: temp.w,
				h: temp.h
			});
			this.pageLoading = false;
			if (resData.FRAME_LIST) {
				temp.isGif = true;
				if (temp.lastRenderTime === undefined) {
					temp.lastRenderTime = 0;
				}
				temp.len = resData.FRAME_LIST.length;
				temp.ind = 0;
				temp = {
					...temp,
					...resData
				};
			}
			scene2.push(temp);
			this.scene2 = scene2;
			this.updateElZIndex();
			this.closeSomeComp();
		},
		// 选择插图
		async pickPicture({ item, index }) {
			this.pageLoadingTips = "正在解析图片...";
			this.pageLoading = true;
			// 获取showBox大小
			let showBoxinfo = await tools.getNode(uni, ".show-box");
			let sW = showBoxinfo.width;
			let sH = showBoxinfo.height;

			// let scene2 = JSON.parse(JSON.stringify(this.scene2));
			let scene2 = this.scene2;

			// 获取图片信息
			let imgDom = {};
			let imageInfo = await new Promise((resolve) => {
				uni.getImageInfo({
					src: item.picSrc,
					success(res) {
						resolve(res);
					},
					fail(err) {
						console.log(err);
						resolve(false);
					}
				});
			});
			if (!imageInfo) {
				tools.easyToast("解析图片出错！");
				return;
			}
			let imgW = imageInfo.width;
			let imgH = imageInfo.height;
			let whR = imgW / imgH; //宽高比
			// 竖屏
			if (imgW == imgH) {
				//等宽高
				imgDom = {
					naturalWidth: sW,
					naturalHeight: sW
				};
			} else if (imgH > imgW) {
				//高长
				imgDom.naturalHeight = sH;
				imgDom.naturalWidth = sH * whR;
			} else {
				//宽长
				imgDom.naturalWidth = sW;
				imgDom.naturalHeight = sW / whR;
			}
			let temp = {
				...item,
				eleType: "photo",
				x: (sW - imgDom.naturalWidth) / 2,
				y: (sH - imgDom.naturalHeight) / 2,
				w: imgDom.naturalWidth,
				h: imgDom.naturalHeight,
				z: null
			};
			let resData = await CanvasGif({
				url: temp.picSrc,
				x: temp.x,
				y: temp.y,
				w: temp.w,
				h: temp.h
			});
			this.pageLoading = false;
			if (resData.FRAME_LIST) {
				temp.isGif = true;
				if (temp.lastRenderTime === undefined) {
					temp.lastRenderTime = 0;
				}
				temp.len = resData.FRAME_LIST.length;
				temp.ind = 0;
				temp = {
					...temp,
					...resData
				};
			}
			scene2.push(temp);
			this.scene2 = scene2;
			this.updateElZIndex();
			this.closeSomeComp();
		},
		// 选择背景
		async pickBgi({ item, index }) {
			this.pageLoadingTips = "正在解析图片...";
			this.pageLoading = true;
			// 获取showBox大小
			let showBoxinfo = await tools.getNode(uni, ".show-box");
			let sW = showBoxinfo.width;
			let sH = showBoxinfo.height;

			// let scene2 = JSON.parse(JSON.stringify(this.scene2));
			let scene2 = this.scene2;
			let bgiInd = scene2.findIndex((e) => e.eleType == "bgi"); //找出背景图;
			// 获取图片信息
			let imgDom = null;
			let imageInfo = await new Promise((resolve) => {
				uni.getImageInfo({
					src: item.picSrc,
					success(res) {
						resolve(res);
					},
					fail(err) {
						console.log("获取showBox大小", err);
						resolve(false);
					}
				});
			});
			if (!imageInfo) {
				tools.easyToast("解析图片出错！");
				return;
			}
			let imgW = imageInfo.width;
			let imgH = imageInfo.height;
			let [maxLenStr, minLenStr] = imgW < imgH ? ["Height", "Width"] : ["Width", "Height"];
			let w, h;
			if (maxLenStr == "Height") {
				w = showBoxinfo.width;
				h = (imgH * w) / imgW;
				if (h < showBoxinfo.height) {
					h = showBoxinfo.height;
					w = (imgW * h) / imgH;
				}
			} else {
				h = showBoxinfo.height;
				w = (imgW * h) / imgH;
				if (w < showBoxinfo.width) {
					w = showBoxinfo.width;
					h = (imgH * w) / imgW;
				}
			}
			if (item.tabbarColor) {
				//背景颜色直接16：9展示
				h = showBoxinfo.height;
				w = (h * 16) / 9;
			}
			let whR = imgW / imgH; //宽高比
			//竖屏(同高切宽)
			imgDom = {
				naturalWidth: sH * whR,
				naturalHeight: sH
			};

			let temp = {
				...item,
				eleType: "bgi",
				x: (showBoxinfo.width - w) / 2, //水平居中
				y: (showBoxinfo.height - h) / 2, //垂直居中
				w: w,
				h: h,
				z: null
			};

			let resData = await CanvasGif({
				url: temp.picSrc,
				x: temp.x,
				y: temp.y,
				w: temp.w,
				h: temp.h
			});
			if (resData.FRAME_LIST) {
				temp.isGif = true;
				if (temp.lastRenderTime === undefined) {
					temp.lastRenderTime = 0;
				}
				temp.len = resData.FRAME_LIST.length;
				temp.ind = 0;
				temp = {
					...temp,
					...resData
				};
			}
			if (bgiInd != -1) {
				//背景只能选择一张，如果有就替换
				scene2[bgiInd] = temp;
			} else {
				scene2.unshift(temp);
			}
			this.scene2 = scene2;
			this.updateElZIndex();
			this.closeSomeComp();
			this.pageLoading = false;
		},
		// 修改音量
		changeVolume(val) {
			console.log("修改音量", val);
			let avatarInd = this.scene2.findIndex((e) => e.eleType == "avatar");
			this.scene2[avatarInd].volume = val;
		},
		// 修改语速
		changeSpeed(val) {
			let avatarInd = this.scene2.findIndex((e) => e.eleType == "avatar");
			this.scene2[avatarInd].speed = val;
		},
		// 修改语调
		changePitch(val) {
			let avatarInd = this.scene2.findIndex((e) => e.eleType == "avatar");
			this.scene2[avatarInd].pitch = val;
		},
		// 选择发音人
		pickSpeaker({ item, index }) {
			this.speaker = item;
		},
		// 删除发音人
		removeSpeaker() {
			this.speaker = {};
		},
		// 选择模特
		async pickAvatar({ item, index }) {
			let showBoxinfo = await tools.getNode(uni, ".show-box");
			if (item.isVip) {
				let userInfo = uni.getStorageSync("userInfo");
				if (userInfo) {
					userInfo = JSON.parse(userInfo);
					if (!userInfo.vipName) return tools.easyToast("请先购买会员！");
				}
			}
			let sW = showBoxinfo.width;
			let sH = showBoxinfo.height;
			let scene2 = this.scene2;
			let imgDom = {};
			let avatarInd = scene2.findIndex((e) => e.eleType == "avatar");
			if (item.humanBindAudioVo) {
				let speakerItem = {
					...item.humanBindAudioVo,
					...item.humanBindAudioVo.dubVo,
					picSrc: item.humanBindAudioVo.headerImg,
					duration: 0,
					durationStr: "00:00"
				};
				this.pickSpeaker({ item: speakerItem });
			}
			// 获取元素的最长边
			// let [maxLenStr, minLenStr] = item.speakerWidth < item.speakerHeight ? ["Height", "Width"] : ["Width", "Height"];
			// let w, h;
			// if (maxLenStr == "Height") {
			// 	h = showBoxinfo.height;
			// 	w = (item.speakerWidth * h) / item.speakerHeight;
			// } else {
			// 	w = showBoxinfo.width;
			// 	h = (item.speakerHeight * w) / item.speakerWidth;
			// }
			let imgW = item.speakerWidth;
			let imgH = item.speakerHeight;
			let whR = imgW / imgH; //宽高比
			// 竖屏
			if (imgW == imgH) {
				//等宽高
				imgDom = {
					naturalWidth: sW,
					naturalHeight: sW
				};
			} else if (imgH > imgW) {
				//高长
				imgDom.naturalHeight = sH;
				imgDom.naturalWidth = sH * whR;
			} else {
				//宽长
				imgDom.naturalWidth = sW;
				imgDom.naturalHeight = sW / whR;
			}
			let temp = {
				...item,
				eleType: "avatar",
				x: (sW - imgDom.naturalWidth) / 2,
				y: (sH - imgDom.naturalHeight) / 2,
				w: imgDom.naturalWidth,
				h: imgDom.naturalHeight,
				z: null
			};
			if (avatarInd != -1) {
				let a = scene2[avatarInd];
				scene2[avatarInd] = {
					...temp,
					// x: a.x,
					// y: a.y,
					x: (sW - imgDom.naturalWidth) / 2,
					y: (sH - imgDom.naturalHeight) / 2,
					z: a.z
				};
			} else {
				scene2.push(temp);
			}
			this.scene2 = scene2;
			this.updateElZIndex();
			this.closeSomeComp();

			// this.updateChangjing(this.changjingAc, true);
		},
		// 删除模特
		removeAvatar(ind) {
			if (tools.myTypeOf(ind) == "Number" && ind >= 0) {
				if (this.scene2[ind].eleType == "avatar") {
					this.scene2.splice(ind, 1);
				} else {
					return tools.easyToast("请选择数字人!");
					// let index = this.scene2.findIndex(e => e.eleType == "avatar");
					// if (index == -1) {
					// 	tools.easyToast('请选择数字人!');
					// } else {
					// 	this.scene2.splice(index, 1);
					// };
				}
			} else {
				return tools.easyToast("请选择数字人!");
				// let index = this.scene2.findIndex(e => e.eleType == "avatar");
				// if (index == -1) {
				// 	tools.easyToast('请选择数字人!');
				// } else {
				// 	this.scene2.splice(index, 1);
				// };
			}
			this.scene2CurrInd = null;
			this.updateElZIndex();
			this.closeSomeComp();
			// this.updateChangjing(this.changjingAc, true);
		},
		// 删除元素
		removeEl(ind) {
			console.log("删除元素", this.scene2CurrInd);
			this.scene2.splice(ind, 1);
			this.scene2CurrInd = null;
			this.updateElZIndex();
			this.closeSomeComp();
		},
		// 修改元素层级
		changeZIndex(ind, num) {
			// 判断元素是否可以修改层级
			let changeEl = this.scene2[ind]; //获取替换元素
			let newInd = ind + num; //计算新层级索引
			if (this.scene2[0].eleType == "bgi") {
				//判断是否有背景图
				if (newInd == 0) {
					tools.easyToast("素材层级不能低于背景图!");
					return;
				}
			}
			if (newInd == -1) {
				tools.easyToast("素材层级已最低!");
				return;
			}
			if (newInd == this.scene2.length) {
				tools.easyToast("素材层级已最高!");
				return;
			}
			// 元素替换
			let [el] = this.scene2.splice(ind, 1);
			this.scene2.splice(ind + num, 0, el);

			// 更新z属性
			this.updateElZIndex();

			// 更新当前元素索引
			let scene2CurrInd = this.scene2.findIndex((e) => e.id == el.id);
			this.scene2CurrInd = this.scene2CurrInd + num;
		},
		// 修改元素音量
		changeElVolume(ind, val) {
			if (ind == "bgm") {
				if (!this.bgm?.volume) return;
				this.bgm.volume = val;
			} else {
				let changeEl = this.scene2[ind]; //获取替换元素
				changeEl.volume = val;
			}
		},
		// 更新元素z属性
		updateElZIndex() {
			this.scene2.reduce((p, e, i) => {
				e.z = p;
				return p + 1;
			}, 0);
		},
		// 文本框tap事件
		textareaTap() {
			this.myDialogShow = false;
			this.footerBarListAc = 0;
		},
		// 关闭一些弹出性组件
		closeSomeComp() {
			this.myDialogShow = false;
			this.footerBarListAc = 0;
			this.scene2CurrInd = null;
			// this.pageLoading = false;
		},
		// 文案框聚焦
		async contentFocus() {
			this.footerBarShow = false;
			this.focusContent = true;

			let scene2CurrInd = this.scene2.findIndex((e) => e.eleType == "texts2");
			if (this.scene2[scene2CurrInd]?.eleType != "texts2") {
				let content = this.content || "默认字幕";
				let showBoxinfo = await tools.getNode(uni, ".show-box");
				let sW = showBoxinfo.width;
				let sH = showBoxinfo.height;
				const fn = (hex) => tools.hexToRgb(hex);
				let obj = {
					eleType: "texts2",
					content: content,
					isText: true,
					lockSize: true,
					sW,
					sH,
					sand: {
						letterSpacing: "0",
						fontname: "alishuheiti.ttf",
						fontFamily: "速黑体",
						primaryColour: "#ffffffff",
						primaryColourVal: fn("#ffffffff"),
						fontsize: 12,
						lineWidth: 2,
						strokeStyle: "#000000ff",
						strokeStyleVal: fn("#000000ff"),
						bgStyle: "#ffffff00",
						bgStyleVal: fn("#ffffff00"),
						alignAc: 1
					}
				};
				let res = this.getTextSize(content, obj.sand, 1);
				obj.w = res.textWidth;
				obj.h = res.textHeight + 16;
				obj.x = (sW - obj.w) / 2;
				obj.y = (sH - obj.h) / 1.12;
				/* // this.ctx.font = 'italic bold 40px'
					this.ctx.setFontSize(obj.sand.fontsize);
					obj.w = this.ctx.measureText(content).width;
					obj.h = obj.sand.fontsize;
					obj.x = (sW - obj.w) / 2;
					obj.y = (sH - obj.h) / 2; */

				this.scene2.push(obj);

				this.scene2CurrInd = this.scene2.length - 1;
				this.updateElZIndex();
			} else {
				this.scene2CurrInd = scene2CurrInd;
			}
			if (this.systemInfo.platform === "ios") {
				this.iosHandleWindowResize();
			}
		},
		// 文案修改
		async contentWatch(event) {
			let showBoxinfo = await tools.getNode(uni, ".show-box");
			let obj = this.scene2.at(this.scene2CurrInd);
			obj.contentAll = this.content;
			obj.sw = showBoxinfo.width;
			obj.content = this.content.slice(0, 12);
			let res = this.getTextSize(obj.content, obj.sand, 1);

			// if (obj.sw > res.textWidth) {
			// 	obj.content = this.content;
			// 	obj.w = res.textWidth;
			// } else {
			// 	obj.maxLen = obj.maxLen ?? obj.contentAll.length;
			// 	obj.content = this.content.slice(0, obj.maxLen);
			// 	obj.w = obj.sw;
			// }
			obj.w = res.textWidth;
			obj.x = (obj.sW - obj.w) / 2;
		},
		// 文案框失焦
		contentBlur() {
			this.footerBarShow = true;
			this.focusContent = false;
			if (this.content == "") {
				this.scene2.splice(this.scene2CurrInd, 1);
			} else {
				// let scene2CurrInd = this.scene2.findIndex(e => e.eleType == 'texts2');
				// let obj = this.scene2.at(scene2CurrInd);
				// obj && (obj.w = this.ctx.measureText(this.content).width);
			}
			this.scene2CurrInd = null;
			if (this.systemInfo.platform === "ios") {
				this.iosHandleWindowResize();
			}
		},
		// 监听屏幕大小变化
		handleWindowResize() {
			uni.onWindowResize(async (res) => {
				console.log("监听屏幕大小变化", res);
				if (res.size.windowHeight < this.systemInfo.windowHeight) {
					this.keyboardH = this.systemInfo.windowHeight - res.size.windowHeight;
					this.webStyle.height = `${res.size.windowHeight}px`;
					if (this.myDialogShow) {
						this.changeMyDH(30, 0, 100);
					}
				} else {
					this.keyboardH = 0;
					this.webStyle.height = `${this.systemInfo.windowHeight}px`;
					if (this.myDialogShow) {
						document.querySelector(".kuangIptText .uni-input-input").blur();
						this.changeMyDH(30, 0, 0);
						this.footerBarShow = true;
					}
				}
			});
		},
		iosHandleWindowResize() {
			setTimeout(() => {
				let info = uni.getSystemInfoSync();
				console.log("监听屏幕大小变化", info);
				console.log("contentFocus-systemInfo", this.systemInfo);
				if (info.windowHeight < this.systemInfo.windowHeight) {
					this.keyboardH = this.systemInfo.windowHeight - info.windowHeight;
					this.webStyle.height = `${info.windowHeight}px`;
					this.webStyle.top = `${info.windowHeight}px`;
					if (this.myDialogShow) {
						this.changeMyDH(30, 0, 100);
					}
				} else {
					this.keyboardH = 0;
					this.webStyle.height = `${this.systemInfo.windowHeight}px`;
					this.webStyle.top = "";
					if (this.myDialogShow) {
						document.querySelector(".kuangIptText .uni-input-input").blur();
						this.changeMyDH(30, 0, 0);
						this.footerBarShow = true;
					}
				}
			}, 300);
		},
		// 修改myDialogH
		changeMyDH(h, b, z) {
			console.log("修改myDialogH", h, b, z);
			b = b ?? 15;
			this.myDialogH = h;
			this.myDialogB = b;
			this.myDialogZ = z;
			this.myDialogShow = false;
			setTimeout(() => {
				this.myDialogShow = true;
			}, 360);
		},
		// 显示myDialog
		showMyDialog(item, dH = 68) {
			if (!item) return;
			this.myDialogH = dH;
			setTimeout(() => {
				if (this.footerBarListAc == item.ac) {
					this.myDialogShow = false;
					this.footerBarListAc = 0;
					return;
				}
				this.footerBarListAc = item.ac;
				this.myDialogShow = true;
			}, 360);
		},
		// 切换底部栏ac
		changeFooterBarListAc({ item, index }) {
			this.myDialogShow = false;
			item.pageAc = 0;
			if (this.footerBarListAc == item.ac) {
				this.closeSomeComp();
				return;
			}
			this.footerBarListAc = item.ac;
			if (item.type == "texts2") {
				this.footerBarListAc = item.ac;
				this.scene2CurrInd = this.scene2.findIndex((e) => e.eleType == "texts2");
			}
		},
		// 修改预料类型
		changeYuliaoTabbarInd({ item, index }) {
			this.yuliaoTabbarInd = index;
		},
		// 剪辑轨道初始化
		initClipTrank() {},
		// 监听组件渲染后端数据(
		async initCompGetData() {
			// 定义监听组件钩子(使用Promise实现异步监听)
			let list = ["PickAvatarRes", "PickBgiRes", "PickVideoRes", "PickTextRes", "PickSubtitlesRes", "PickPictureRes", "PickMusicRes"].map((field) => {
				return new Promise((resolve) => {
					this[field] = resolve;
				}).then((res) => {
					this[field] = null;
					return res;
				});
			});

			// 监听所有组件的数据请求完成
			let ress = await Promise.all(list);

			// 执行下一步
			return ress;
		},
		// 获取系统info
		initSystemInfo(isUpdate = true) {
			const that = this;
			return new Promise((resolve, reject) => {
				uni.getSystemInfo({
					success(payload) {
						if (isUpdate) {
							that.oldSystemInfo = that.systemInfo;
							that.systemInfo = payload;
							that.webStyle.height = `${that.systemInfo.windowHeight}px`;
						}
						resolve(payload);
					}
				});
			});
		},
		// mounted初始化
		initMounted() {
			if (this.initMountedTimer) {
				clearTimeout(this.initMountedTimer);
			}
			this.initMountedTimer = setTimeout(async () => {
				console.log("mounted初始化", this.compGetDataSuccess);
				if (this.compGetDataSuccess) {
					this.handleWindowResize();
					await this.initShowBox();
					this.initChangjing();
					await this.getVirtualcoinrationAllApi();
					await this.getHomeDetailInfoApi();
				} else {
					this.initMountedTimer = null;
					this.initMounted();
				}
			}, 1520);
		},
		// 尺寸初始化
		initChicun() {
			this.changjing_show_box_class = ["show-box", this.chicunList.find((e) => e.id == this.chicunAc).className];
		},
		// canvas初始化
		async initCtx() {
			// 初始化
			if (!this.ctx) {
				this.ctx = uni.createCanvasContext("show-box");
			}
			let ow = this.oldShowBoxStyle.showBoxRef?.width;
			let nw = this.showBoxStyle.showBoxRef?.width;
			let scene2ScaleVal = ow ? nw / ow : 1;
			let scene2 = JSON.parse(JSON.stringify(this.scene2));
			// let scene2 = tools.deepClone(this.scene2);
			scene2.map((item) => {
				return {
					...item,
					x: item.x * scene2ScaleVal,
					y: item.y * scene2ScaleVal,
					w: item.w * scene2ScaleVal,
					h: item.h * scene2ScaleVal
				};
			});
			this.scene2 = scene2;
			// console.log('canvas初始化', this.scene2[0]);
			return true;
		},
		// showBox初始化
		async initShowBox() {
			let Chicun = uni.getStorageSync("chicun");
			if (Chicun) {
				this.chicunAc = Chicun.id;
			}
			this.initChicun();
			uni.removeStorageSync("chicun");

			this.oldShowBoxStyle = JSON.parse(JSON.stringify(this.showBoxStyle));
			let workShowRef = await tools.getNode(uni, ".work-show");
			const baseUnit = this.systemInfo.windowWidth / 100;
			let workShowH = workShowRef.height;
			let workShowH_vw = workShowRef.height / baseUnit;
			let showBoxW = 0;
			let chicunRatio = 1; //尺寸比例，用来计算showBoxH

			switch (+this.chicunAc) {
				case 1: //横屏
					showBoxW = 100;
					chicunRatio = 9 / 16;
					break;
				case 2: //竖屏
					showBoxW = workShowH_vw * (9 / 16);
					chicunRatio = 16 / 9;
					break;
				case 3: //1：1屏
					showBoxW = workShowH_vw;
				default:
					break;
			}

			await new Promise((resolve) => {
				this.showBoxStyle = {
					width: showBoxW + "vw",
					height: showBoxW * chicunRatio + "vw",
					// background: '#FFF',
					showBoxRef: {}
				};
				this.$nextTick(() => {
					setTimeout(async () => {
						let showBoxRef = await tools.getNode(uni, ".show-box");
						this.showBoxStyle.showBoxRef = showBoxRef;
						await this.initCtx();
						resolve();
					}, 1000);
				});
			});
			console.log("showBox初始化");
			return true;
		},
		// 还原场景
		restoreChangjing(changjing) {
			console.log("还原场景", changjing);
			let showBoxH = this.showBoxStyle.showBoxRef.height;
			changjing.map((ChangjingData) => {
				let changjingItem = {};
				let scene2 = [];
				let bgm = {};
				// console.log(ChangjingData.clipTrackData.map(e => e.num.map(e=>[e,ChangjingData.scene2[e.scene2Ind]])));
				let ratio = showBoxH / ChangjingData.sceneBoxPrevHeight;
				ChangjingData.clipTrackData.map((clipTrack) => {
					clipTrack.num.map((e, i) => {
						let scene2Item = {};
						switch (e.eleType) {
							case "avatar_style":
								scene2Item = ChangjingData.scene2[e.scene2Ind];
								scene2Item.picSrc = scene2Item.speakerUrl?.replace("https://alleymall.oss-cn-guangzhou.aliyuncs.com/", `${location.origin}/assets/`) || null;
								scene2Item.x *= ratio;
								scene2Item.y *= ratio;
								scene2Item.w *= ratio;
								scene2Item.h *= ratio;
								scene2.push(scene2Item);
								break;
							case "bgi_style":
								scene2Item = ChangjingData.scene2[e.scene2Ind];
								scene2Item.eleType = "bgi";
								scene2Item.picSrc = scene2Item.matterUrl?.replace("https://alleymall.oss-cn-guangzhou.aliyuncs.com/", `${location.origin}/assets/`) || null;
								scene2Item.x *= ratio;
								scene2Item.y *= ratio;
								scene2Item.w *= ratio;
								scene2Item.h *= ratio;
								scene2.push(scene2Item);
								break;
							case "video_style_1":
								scene2Item = ChangjingData.scene2[e.scene2Ind];
								scene2Item.eleType = "video";
								scene2Item.picSrc = scene2Item.theCover?.replace("https://alleymall.oss-cn-guangzhou.aliyuncs.com/", `${location.origin}/assets/`) || null;
								scene2Item.x *= ratio;
								scene2Item.y *= ratio;
								scene2Item.w *= ratio;
								scene2Item.h *= ratio;
								scene2.push(scene2Item);
								break;

							case "video_style_0":
								scene2Item = ChangjingData.scene2[e.scene2Ind];
								scene2Item.eleType = "photo";
								scene2Item.picSrc = scene2Item.matterUrl?.replace("https://alleymall.oss-cn-guangzhou.aliyuncs.com/", `${location.origin}/assets/`) || null;
								scene2Item.x *= ratio;
								scene2Item.y *= ratio;
								scene2Item.w *= ratio;
								scene2Item.h *= ratio;
								scene2.push(scene2Item);
								break;
							case "tag_style":
								scene2Item = ChangjingData.scene2[e.scene2Ind];
								scene2Item.isText = true;
								// scene2Item.sand.fontsize *= ratio;
								scene2Item.x *= ratio;
								scene2Item.y *= ratio;
								// tools.loadFont(sand.fontname, sand.fontUrl);
								// scene2Item.sand.fontsize = Math.floor(scene2Item.sand.fontsize);
								scene2Item.sand.fontsize = Math.floor(scene2Item.sand.fontsize * ratio);
								scene2Item.sand.primaryColourVal = tools.hexToRgb(scene2Item.sand.primaryColour);
								scene2Item.sand.bgStyleVal = tools.hexToRgb(scene2Item.sand.bgStyle);
								scene2Item.sand.strokeStyleVal = tools.hexToRgb(scene2Item.sand.strokeStyle);
								let tag_style_res = this.getTextSize(scene2Item.content, scene2Item.sand, 1);
								scene2Item.w = tag_style_res.textWidth;
								scene2Item.h = tag_style_res.textHeight + 16;
								scene2.push(scene2Item);
								break;
							case "subtitles_style":
								scene2Item = ChangjingData.scene2[e.scene2Ind];
								scene2Item.isText = true;
								// scene2Item.sand.fontsize *= ratio;
								scene2Item.ind = i;
								scene2Item.x *= ratio;
								scene2Item.y *= ratio;
								// tools.loadFont(sand.fontname, sand.fontUrl);
								// scene2Item.sand.fontsize = Math.floor(scene2Item.sand.fontsize);
								scene2Item.sand.fontsize = Math.floor(scene2Item.sand.fontsize * ratio);
								scene2Item.sand.primaryColourVal = tools.hexToRgb(scene2Item.sand.primaryColour);
								scene2Item.sand.bgStyleVal = tools.hexToRgb(scene2Item.sand.bgStyle);
								scene2Item.sand.strokeStyleVal = tools.hexToRgb(scene2Item.sand.strokeStyle);
								let subtitles_style_res = this.getTextSize(scene2Item.content, scene2Item.sand, 1);
								scene2Item.w = subtitles_style_res.textWidth;
								scene2Item.h = subtitles_style_res.textHeight + 16;
								scene2.push(scene2Item);
								break;
							case "back_audio_style":
								bgm.matterUrl = e.musicUrl;
								bgm.matterName = e.fileName;
						}
					});
				});
				changjingItem.chicunAc = 2;
				changjingItem.scene2 = scene2.reverse();
				changjingItem.bgm = bgm;
				changjingItem.idx = tools.createID();
				changjingItem.speaker = {
					dubId: ChangjingData.audioManData.AudioManAc,
					AudioManStyleAc: ChangjingData.audioManData.AudioManStyleAc
				};
				api.getStyleOfAudioMan(changjingItem.speaker.dubId).then((res) => {
					if (!res) return;
					let citem = this.changjing.find((e) => e.idx == changjingItem.idx);
					if (!citem) return;
					citem.speaker.thirdpartyId = res.data[citem.speaker.AudioManStyleAc].thirdpartyId;
				});
				changjingItem.content = ChangjingData.content;
				this.changjing.push(changjingItem);
			});
			this.changeChangjing(0, true);
		},
		// 场景初始化
		async initChangjing() {
			let Operate = uni.getStorageSync("draft");
			let Template = uni.getStorageSync("template");
			if (Operate) {
				//有草稿
				let res = await api.getCacheAdvanceRetreatSelectall({
					key: Operate.draftId
				});
				if (!res) return;
				let item = JSON.parse(res.data.value.at(-1).value);
				this.initChicun();
				this.restoreChangjing(item.operatChangjing);
				uni.removeStorageSync("draft");
			} else if (Template) {
				//有模板
				let res = await uni.request({
					url: Template.matterUrl
				});
				if (!res) return;
				this.restoreChangjing(res.data);
				uni.removeStorageSync("template");
			} else {
				this.addChangjing();
			}
			setTimeout(() => {
				this.changjingInitSucc = true;
			}, 1520);
		},
		// 场景切换
		changeChangjing(index, isSave) {
			// 切换场景前保存数据
			let oldAc = this.changjingAc;
			console.log("场景切换", { index, oldAc });
			if (oldAc == index) {
				return;
			}
			// if (oldAc != -1) {
			// 	let prev = this.updateChangjing(oldAc);
			// 	// this.$set(this.changjing, oldAc, JSON.parse(JSON.stringify(prev)));
			// 	this.$set(this.changjing, oldAc, prev);
			// };

			if (oldAc != -1) {
				this.secne2CanvasPic();
			}
			// 切换数据
			this.changjingAc = index;
			let curr = this.changjing[index];
			if (curr) {
				this.updateDataOfChangjing(curr);
			}

			// 一些数据初始化
		},
		// 通过场景更新数据
		updateDataOfChangjing(curr) {
			curr = curr ? curr : this.changjing[this.changjingAc];
			if (!curr) return;
			// curr = tools.deepClone(curr);
			// show-box更新
			this.scene2 = curr.scene2;
			this.sceneBoxPrevHeight = curr.sceneBoxPrevHeight;
			this.nativeScene2 = curr.nativeScene2;
			this.isPpt = curr.isPpt;

			//文本驱动更新
			this.content = curr.content;
			//音频驱动更新
			this.audioSrc = curr.audioSrc ?? "";

			// 背景音乐更新
			this.bgm = curr.bgm;

			// 发音人更新
			this.speaker = curr.speaker;
		},
		// 场景更新
		updateChangjing(ac, isUpdate) {
			// console.log('场景更新start');
			ac = ac ? ac : this.changjingAc;
			let curr = this.changjing[ac];
			if (!curr) return;

			// curr = JSON.parse(JSON.stringify(this.changjing[ac]));
			// curr = tools.deepClone(this.changjing[ac]);

			// show-box更新
			let scene2Temp = this.scene2;
			this.$set(curr, "scene2", scene2Temp);
			this.$set(curr, "sceneRatio", this.sceneRatio);
			this.$set(curr, "sceneBoxPrevHeight", this.sceneBoxPrevHeight);
			this.$set(curr, "nativeScene2", this.nativeScene2);
			this.$set(curr, "isPpt", false);

			//文本驱动更新
			let content2Temp = this.content;
			let contentAudioTemp = this.contentAudio;
			this.$set(curr, "content", content2Temp);
			this.$set(curr, "contentAudio", contentAudioTemp);

			//音频驱动更新
			let audioAcTemp = this.audioAc;
			let audioSrcTemp = this.audioSrc;
			let languageListAcTemp = this.languageListAc;
			this.$set(curr, "audioAc", audioAcTemp);
			this.$set(curr, "audioSrc", audioSrcTemp);
			this.$set(curr, "languageListAc", languageListAcTemp);

			//音频列表更新
			let audioManData = {
				//音频人
				// lingyu_data: this.lingyu_data,
				lingyuAc: this.lingyuAc,
				// AudioManData: this.AudioManData,
				AudioManAc: this.AudioManAc,
				// AudioManStyleData: this.AudioManStyleData,
				AudioManStyleAc: this.AudioManStyleAc,
				yusuVal: this.yusuVal,
				yudiaoVal: this.yudiaoVal
			};
			this.$set(curr, "audioManData", audioManData);

			// 发音人更新
			let speakerTemp = this.speaker;
			this.$set(curr, "speaker", speakerTemp);

			//背景音乐更新
			let bgmTemp = this.bgm;
			this.$set(curr, "bgm", bgmTemp);

			if (isUpdate) {
				// 更新场景
				this.$set(this.changjing, ac, curr);
			}
			// console.log('场景更新', JSON.parse(JSON.stringify(curr)));
			return curr;
		},
		// 删除场景
		delChangjing(item, index) {
			this.changjing.splice(index, 1);
			this.changeChangjing(0);
		},
		// 添加场景
		addChangjing() {
			console.log("添加场景", this.chicunAc);
			let AiCont = uni.getStorageSync("aiCont");
			let content = "";
			if (AiCont) {
				content = AiCont.cont;
				uni.removeStorageSync("aiCont");
			}
			this.changjing.push({
				chicunAc: this.chicunAc,
				scene2: [],
				content: content,
				idx: tools.createID()
			});
			this.changeChangjing(this.changjing.length - 1, true);
			let AvatarIndex = 0;
			let AvatarStorage = uni.getStorageSync("avatar");
			if (AvatarStorage) {
				console.log(AvatarStorage);
				AvatarIndex = this.$refs.PickAvatar.yushe.findIndex((e) => e.id == AvatarStorage.id);
				uni.removeStorageSync("avatar");
			}
			this.pickAvatar({
				item: this.$refs.PickAvatar.yushe[AvatarIndex],
				index: AvatarIndex
			});
			setTimeout(() => {
				this.secne2CanvasPic();
			}, 1520);
		},
		// ctx渲染函数
		ctxRanderStart(timestamp) {
			// setInterval(() => {
			// 	let nowDate = Date.now();
			// 	this.ctxRander(nowDate);
			// }, 40);

			// this.ctxRander();
			// let timer = setTimeout(this.ctxRanderStart, 40);

			// if (timestamp - lastRenderTime > fpsInterval) {
			// 	this.ctxRander();
			// 	lastRenderTime = timestamp - (timestamp % fpsInterval);
			// };
			// requestAnimationFrame(this.ctxRanderStart);

			this.ctxRander(timestamp);

			// 获取当前页面的实例
			const pages = getCurrentPages();
			const currentPage = pages[pages.length - 1];
			// 获取页面路径
			const pagePath = currentPage?.route;
			if (pagePath == "pages/createAvatar/createAvatar") {
				requestAnimationFrame(this.ctxRanderStart);
			}
		},
		// 渲染canvas
		ctxRander(timestamp) {
			// console.log(Math.floor(timestamp / 1000)); //测试fps
			if (!this.ctx) return;
			this.scene2.map((item, index) => {
				if (item.isText) {
					//渲染字体
					if (item.eleType == "texts2") {
						if (item.ind) {
							// 只渲染第一句字幕
							return;
						}
						if (!this.subtitlesShow) {
							// 不显示字幕
							return;
						}
					}
					// 渲染背景
					// this.ctx.setFillStyle(item.sand.bgStyle.slice(0,7));
					this.ctx.setFillStyle(rgbaObj2Str(item.sand.bgStyleVal));
					// this.ctx.rect(item.x, item.y /* - item.h */ , item.w, item.h);
					// this.ctx.fill();
					this.ctx.fillRect(item.x, item.y /* - item.h */, item.w, item.h);

					// 渲染文字
					this.ctx.setFillStyle(rgbaObj2Str(item.sand.primaryColourVal));
					this.ctx.font = `${item.sand.fontsize}px ${item.sand.fontFamily}`;
					// console.log(`normal ${item.sand.fontsize}px ${item.sand.fontFamily}`);
					this.ctx.fillText(item.content, item.x, item.y + item.h - 12, item.sw ?? null);

					// 渲染文字描边
					this.ctx.setStrokeStyle(rgbaObj2Str(item.sand.strokeStyleVal));
					this.ctx.setLineWidth(item.sand.lineWidth);
					this.ctx.strokeText(item.content, item.x, item.y + item.h - 12, item.sw ?? null);
				} else {
					if (item.picSrc) {
						this.ctx.drawImage(item.picSrc, item.x, item.y, item.w, item.h);
					}
				}
				if (this.scene2CurrInd === index) {
					// 绘制选中元素的操作点
					const arcRadius = this.arcRadius; // 单位px
					this.ctx.setFillStyle("#00deb9");
					let offsetVal = 0;
					if (item.eleType == "texts") {
						offsetVal = /* item.h */ 0;
					}
					const pointList = [
						// 操作点
						[item.x, item.y],
						[item.x + item.w, item.y],
						[item.x + item.w, item.y + item.h],
						[item.x, item.y + item.h]
					].map((point) => {
						this.ctx.beginPath();
						this.ctx.arc(point[0], point[1] - offsetVal, arcRadius, 0, 2 * Math.PI);
						this.ctx.fill();
						return point;
					});
					// 绘制设置选中元素的边框
					const borderWidth = 1; //单位px
					this.ctx.beginPath();
					this.ctx.setStrokeStyle("#00deb9");
					this.ctx.setLineWidth(borderWidth);
					this.ctx.strokeRect(item.x, item.y - offsetVal, item.w - borderWidth, item.h - borderWidth);
					// 绘制删除按钮
					this.ctx.drawImage(this.imgPath + "createAvatar/Close.svg", item.x - (arcRadius * 2) / 3 - 1, item.y - (arcRadius * 2) / 3 - 1, (arcRadius * 3) / 2, (arcRadius * 3) / 2);
				}
			});
			this.ctx.draw();
			// 将scene2转成canvas图片
			if (this.changjing.length != 0) {
				let fpsIntervals = 1000 / 2; //限定为2帧率(1秒2次)
				if (timestamp - lastRenderTime > fpsIntervals) {
					if (this.changjingInitSucc) {
						if (!this.changjing[0]?.scene2Url) {
							if (this.changjingAc == 0) {
								this.secne2CanvasPic();
							}
						}
					}
					// let canvasDom = document.querySelector("#show-box > canvas");
					// let base64Blob = tools.base64toBlob(canvasDom.toDataURL("image/png"));
					// this.$set(this.changjing[this.changjingAc], "scene2Url", URL.createObjectURL(base64Blob));
					this.updateChangjing(this.changjingAc, true);
					lastRenderTime = timestamp - (timestamp % fpsIntervals);
				} else {
				}
			}
		},
		// 渲染canvas
		ctxRander_bak(timestamp) {
			// console.log(Math.floor(timestamp / 1000)); //测试fps
			if (!this.ctx) return;
			this.scene2.map((item, index) => {
				if (item.isGif) {
					//渲染gif
					let {
						TEMP_CANVAS, //临时canvas(用来渲染gif每一帧图片)
						FRAME_LIST, //gif每一帧图片信息
						x,
						y,
						w,
						h
					} = item;
					let arg = [x, y, w, h].filter((e) => e || e === 0);
					if (timestamp - item.lastRenderTime > fpsInterval) {
						//限定gif帧率
						TEMP_CANVAS.getContext("2d").putImageData(FRAME_LIST[item.ind].data, 0, 0);
						item.ind++;
						item.lastRenderTime = timestamp - (timestamp % fpsInterval);
					} else {
						// TEMP_CANVAS.getContext("2d").putImageData(FRAME_LIST[item.ind].data, 0, 0);
						// item.ind++;
					}
					this.ctx.drawImage(TEMP_CANVAS.toDataURL("image/png"), x, y, w, h);
					if (item.ind >= item.len) {
						item.ind = 0;
					}
				} else if (item.isText) {
					//渲染字体
					if (item.eleType == "texts2") {
						if (item.ind) {
							// 只渲染第一句字幕
							return;
						}
						if (!this.subtitlesShow) {
							// 不显示字幕
							return;
						}
					}
					// 渲染背景
					// this.ctx.setFillStyle(item.sand.bgStyle.slice(0,7));
					this.ctx.setFillStyle(rgbaObj2Str(item.sand.bgStyleVal));
					// this.ctx.rect(item.x, item.y /* - item.h */ , item.w, item.h);
					// this.ctx.fill();
					this.ctx.fillRect(item.x, item.y /* - item.h */, item.w, item.h);

					// 渲染文字
					this.ctx.setFillStyle(rgbaObj2Str(item.sand.primaryColourVal));
					this.ctx.font = `${item.sand.fontsize}px ${item.sand.fontFamily}`;
					// console.log(`normal ${item.sand.fontsize}px ${item.sand.fontFamily}`);
					this.ctx.fillText(item.content, item.x, item.y + item.h - 12, item.sw ?? null);

					// 渲染文字描边
					this.ctx.setStrokeStyle(rgbaObj2Str(item.sand.strokeStyleVal));
					this.ctx.setLineWidth(item.sand.lineWidth);
					this.ctx.strokeText(item.content, item.x, item.y + item.h - 12, item.sw ?? null);
				} else {
					if (item.picSrc) {
						this.ctx.drawImage(item.picSrc, item.x, item.y, item.w, item.h);
					}
				}
				if (this.scene2CurrInd === index) {
					// 绘制选中元素的操作点
					const arcRadius = this.arcRadius; // 单位px
					this.ctx.setFillStyle("#00deb9");
					let offsetVal = 0;
					if (item.eleType == "texts") {
						offsetVal = /* item.h */ 0;
					}
					const pointList = [
						// 操作点
						[item.x, item.y],
						[item.x + item.w, item.y],
						[item.x + item.w, item.y + item.h],
						[item.x, item.y + item.h]
					].map((point) => {
						this.ctx.beginPath();
						this.ctx.arc(point[0], point[1] - offsetVal, arcRadius, 0, 2 * Math.PI);
						this.ctx.fill();
						return point;
					});
					// 绘制设置选中元素的边框
					const borderWidth = 1; //单位px
					this.ctx.beginPath();
					this.ctx.setStrokeStyle("#00deb9");
					this.ctx.setLineWidth(borderWidth);
					this.ctx.strokeRect(item.x, item.y - offsetVal, item.w - borderWidth, item.h - borderWidth);
				}
			});
			this.ctx.draw();

			if (this.changjing.length != 0) {
				let fpsIntervals = 1000 / 2; //限定为2帧率(1秒2次)
				if (timestamp - lastRenderTime > fpsIntervals) {
					// this.secne2CanvasPic();
					this.updateChangjing(this.changjingAc, true);
					// lastRenderTime = timestamp - (timestamp % fpsIntervals);
				} else {
				}
			}
		},

		// 获取文字大小
		getTextSize(text, sand, scale) {
			// const canvas = document.createElement('canvas');
			const canvas = document.querySelector("#text-cvs > canvas");
			const context = canvas.getContext("2d");
			context.clearRect(0, 0, canvas.width, canvas.height);
			const letterSpacing = sand.letterSpacing;
			canvas.style.letterSpacing = letterSpacing + "px";
			context.scale(scale, scale);
			context.font = `${sand.fontsize}px ${sand.fontFamily}`;
			context.strokeStyle = sand.strokeStyle;
			context.lineWidth = sand.lineWidth;
			context.fillStyle = sand.primaryColour;
			const textWidth = context.measureText(text).width - (letterSpacing ?? 0);
			const textHeight = context.measureText(text).actualBoundingBoxAscent + context.measureText(text).actualBoundingBoxDescent;
			context.clearRect(0, 0, canvas.width, canvas.height);
			return {
				textWidth,
				textHeight,
				actualBoundingBoxAscent: context.measureText(text).actualBoundingBoxAscent,
				actualBoundingBoxDescent: context.measureText(text).actualBoundingBoxDescent
			};
		},
		// 将scene2转成canvas图片
		secne2CanvasPic() {
			let canvasDom = document.querySelector("#show-box > canvas");
			let base64Blob = tools.base64toBlob(canvasDom.toDataURL("image/png"));
			if (this.changjing[this.changjingAc]) {
				this.$set(this.changjing[this.changjingAc], "scene2Url", URL.createObjectURL(base64Blob));
			}
		}
	},
	async created() {
		const that = this;
		uni.webView?.getEnv(function (res) {
			console.log("当前环境：" + JSON.stringify(res));
			that.getEnv = res;
		});

		// #ifdef H5
		// 内嵌页获取token
		let _ind = window.location.href.indexOf("?");
		let payloadStr = window.location.href.slice(_ind + 1);
		let tempArr = tools.deCodeUrl(payloadStr).split("&");
		let pathPayload = tempArr.reduce((p, e) => {
			let arr = e.split("=");
			p[arr[0]] = arr[1];
			return p;
		}, {});
		console.log("内嵌页获取token", pathPayload);
		switch (pathPayload.updateType) {
			case "Operate":
				uni.setStorageSync("draft", {
					draftId: pathPayload.draftId,
					updateType: "Operate"
				});
				break;
			case "VideoTemplate":
				uni.setStorageSync("template", {
					matterUrl: pathPayload.matterUrl,
					updateType: "VideoTemplate"
				});
				break;
			case "ChiCun":
				uni.setStorageSync("chicun", {
					updateType: "ChiCun",
					id: pathPayload.id,
					index: pathPayload.index
				});
				break;
			case "AiCont":
				uni.setStorageSync("aiCont", {
					updateType: "AiCont",
					cont: pathPayload.cont
				});
				break;
			case "PickAvatar":
				uni.setStorageSync("avatar", {
					id: pathPayload.id,
					index: pathPayload.index,
					updateType: "PickAvatar"
				});
				break;
		}
		if (pathPayload.token) {
			let token = pathPayload.token;
			uni.setStorageSync("token", pathPayload.token);
		}
		// #endif

		let systemInfo = await this.initSystemInfo();
		if (this.systemInfo.uniPlatform == "mp-weixin" || this.systemInfo.uniPlatform == "app") {
			let Operate = uni.getStorageSync("draft");
			let Template = uni.getStorageSync("template");
			let chicun = uni.getStorageSync("chicun");
			let aiCont = uni.getStorageSync("aiCont");
			let avatar = uni.getStorageSync("avatar");
			let str = "?";
			let obj = {};
			let token = uni.getStorageSync("token");
			if (token) obj.token = token;
			if (Operate) {
				obj = {
					...obj,
					...Operate
				};
				uni.removeStorageSync("draft");
			} else if (Template) {
				obj = {
					...obj,
					...Template
				};
				uni.removeStorageSync("template");
			} else if (chicun) {
				obj = {
					...obj,
					...chicun
				};
				uni.removeStorageSync("chicun");
			} else if (aiCont) {
				obj = {
					...obj,
					...aiCont
				};
				uni.removeStorageSync("aiCont");
			} else if (avatar) {
				obj = {
					...obj,
					...avatar
				};
				uni.removeStorageSync("avatar");
			}
			for (const key in obj) {
				str += `${key}=${obj[key]}&`;
			}
			this.urlParams = str.slice(0, -1);
		} else if (this.systemInfo.uniPlatform == "web") {
			if (_ind == -1) {
				uni.setStorageSync("web", 1);
			} else {
				uni.setStorageSync("web", 0);
			}
			let avatar = uni.getStorageSync("avatar");
			if (avatar) {
				let size = +avatar.index + 1;
				size = size >= 16 ? size : 16;
				this.pickAvatarYusheSize = size;
			}
			this.initCompGetData().then(async (successFlag) => {
				//后端数据已请求完毕
				console.log("后端数据已请求完毕", successFlag);
				this.compGetDataSuccess = true;

				// // 下载所有渲染字体
				// this.$refs.PickText.fontList.map(fontobj => {
				// 	tools.loadFont(fontobj.fontName, fontobj.fontUrl);
				// });
			});
		}
	},
	async mounted() {
		if (this.systemInfo.uniPlatform == "web") {
			this.initMounted();
		}
	},
	async onLoad() {},
	async onReady() {
		this.ctxRanderStart();
	},
	watch: {
		focusContent: {
			handler(val) {
				this.webBottomStyle = this.focusContent ? { height: this.webStyle.height } : {};
			}
		}
		// scene2: {
		// 	handler(val) {
		// 		this.ctxRander();
		// 	},
		// 	deep: true,
		// },
		// scene2CurrInd: {
		// 	handler(val) {
		// 		console.log(val);
		// 		if(val===null){
		// 			if(this.myDialogShow == false) return;
		// 			this.closeSomeComp();
		// 		}else{
		// 		};
		// 	},
		// }
	},
	components
};
</script>

<style lang="scss">
.createAvatar {
	width: 100vw;
	height: 100vh;
	background: #0c1411;
	position: relative;
	color: #fff;
	--transition-duration-val: 300ms;

	.web {
		width: 100vw;
		height: 100vh;
		background: #111111;
		position: relative;
		display: flex;
		flex-direction: column;
		overflow: hidden;
	}

	.mp-weixin {
		width: 100vw;
		height: 100vh;
		background: #111111;
		position: relative;
	}

	.back-box {
		position: relative;
		top: 0;
		left: 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		padding: 3vw 3vw;
		box-sizing: border-box;
		background: linear-gradient(180deg, #000 -45%, transparent);

		.icon {
			width: 6vw;
			height: 6vw;
			display: block;
		}

		.right-btns {
			display: flex;

			.btn-item {
				display: flex;
				border-radius: 100vw;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-left: 2vw;
				padding: 1vw 2vw;
				font-size: 30rpx;

				&.style1 {
					border: 1px solid rgba(0, 222, 185, 1);
					color: rgba(0, 222, 185, 1);
				}

				&.style2 {
					background: linear-gradient(270deg, rgba(0, 222, 185, 1) 0%, rgba(122, 255, 233, 1) 100%);
					color: #111111;
				}
			}
		}
	}

	--safe-top: 10vw;

	.back-box-icon {
		position: absolute;
		width: 6vw;
		height: 6vw;
		display: block;
		top: 2.5vw;
		left: 3vw;
		z-index: 1;

		&.appStyle {
			top: calc(2.5vw + var(--safe-top));
		}
	}

	.back-box-btn-item {
		position: absolute;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-left: 2vw;
		padding: 1vw 2vw;
		font-size: 30rpx;
		width: max-content;
		height: max-content;
		border-radius: 2vw;
		z-index: 1;
		top: 2.5vw;

		&.appStyle {
			top: calc(2.5vw + var(--safe-top));
		}

		&.style1 {
			// border: 1px solid rgba(0, 222, 185, 1);
			// color: rgba(0, 222, 185, 1);
			color: rgba(116, 153, 141, 1);
			background: rgba(24, 66, 68, 0.5);
			right: 16vw;
		}

		&.style2 {
			background: linear-gradient(217.51deg, rgba(0, 255, 174, 1) 0%, rgba(27, 161, 250, 1) 100%);
			// background: linear-gradient(270deg, rgba(0, 222, 185, 1) 0%, rgba(122, 255, 233, 1) 100%);
			color: rgba(17, 17, 19, 1);
			right: 2vw;
		}
	}

	.work-show {
		display: flex;
		justify-content: center;
		align-items: center;
		flex: 1;
		overflow: auto;
		transition: all var(--transition-duration-val);

		.show-box {
			position: relative;
			margin: 0px auto;
			transition: all var(--transition-duration-val);

			#text-cvs {
				position: absolute;
				top: 0;
				left: 0;
				z-index: -1;
			}
		}
	}

	.center-box {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 1vw 4vw;
		box-sizing: border-box;
		background: #0c1411;

		.l {
			display: flex;
			align-items: center;

			.icon1 {
				width: 6vw;
			}

			.text {
				margin: 0vw 2vw;
				font-size: 24rpx;
				color: rgba(255, 255, 255, 1);
			}

			.add {
				width: 6vw;
				height: 6vw;
				opacity: 1;
				border-radius: 10px;
				background: rgba(0, 153, 127, 1);
				display: flex;
				justify-content: center;
				align-items: center;

				.icon2 {
					width: 46%;
				}
			}
		}

		.r {
			display: flex;
			align-items: center;

			.text {
			}

			.switch {
			}

			.icon2 {
				width: 8vw;
			}
		}
	}

	.web-bottom {
		background: rgb(28, 28, 30);
		background: rgba(14, 28, 24, 1);
		height: 40vh;
		transition: all var(--transition-duration-val);
		display: flex;
		flex-direction: column;
		overflow: hidden;

		.changjingList {
			display: -webkit-box;
			box-sizing: border-box;
			padding: 1.5vw 4vw;
			width: 100%;
			overflow: auto;
			--item-width-size: 16vw;
			--border-radiu-val: 2vw;
			border-bottom: 1px solid rgba(34, 48, 44, 1);

			.changjing-item {
				border-radius: var(--border-radiu-val);
				border: 1px solid rgba(0, 153, 127, 1);
				box-sizing: content-box;
				overflow: hidden;
				margin-right: 1.5vw;
				position: relative;

				&.ac {
					border: 2px solid rgba(0, 222, 185, 1);

					.del {
						display: block;
					}
				}

				.del {
					width: 3vw;
					height: 3vw;
					position: absolute;
					top: 1vw;
					right: 1vw;
					display: none;

					.del-icon {
						width: 100%;
						height: 100%;
						display: block;
					}
				}

				.changjing-work-show {
					width: var(--item-width-size);
					height: calc(var(--item-width-size) * (9 / 16));
					display: flex;
					justify-content: center;
					align-items: center;

					.show-box {
						position: relative;

						&.chicun-9-16 {
							width: calc(var(--item-width-size) * (9 / 16) * (9 / 16));
							height: 100%;
							background: "#FFF";
						}

						&.chicun-16-9 {
							width: 100%;
							height: 100%;
							background: "#FFF";
						}

						&.chicun-1-1 {
							width: calc(var(--item-width-size) * (9 / 16));
							height: 100%;
							background: "#FFF";
						}

						.pic {
							width: 100%;
							height: 100%;
							display: block;
						}
					}
				}
			}

			.changjing-item-add {
				width: calc(var(--item-width-size) * (9 / 25));
				height: calc(var(--item-width-size) * (9 / 16));
				// background: linear-gradient(270deg, rgba(0, 222, 185, 1) 0%, rgba(122, 255, 233, 1) 100%);
				border: 1px solid rgba(0, 222, 185, 1);
				border-radius: var(--border-radiu-val);
				box-sizing: content-box;
				overflow: hidden;
				display: flex;
				justify-content: center;
				align-items: center;

				.icon {
					width: 50%;
					height: 50%;
					display: block;
				}
			}
		}

		.yuliao {
			flex: 1;
			display: flex;
			flex-direction: column;
			overflow: hidden;

			.yuliao-tabbar {
				display: flex;
				justify-content: center;
				align-items: center;
				padding: 2.5vw;

				.item {
					&:first-child {
						margin-right: 5vw;
					}
				}
			}

			.yuliao-contnet {
				flex: 1;
				display: flex;
				flex-direction: column;
				overflow: hidden;

				.content-box-view {
					flex: 1;
					padding: 2vw;
					position: relative;
					display: flex;
					flex-direction: column;
					overflow: hidden;

					.isAudio {
						display: flex;
						justify-content: space-between;
						align-items: center;
						background: rgba(255, 255, 255, 0.10086);
						border-radius: 2.5vw;
						box-sizing: border-box;
						padding: 1.5vw;
						margin-bottom: 2vw;

						.icon {
							width: 6.8vw;
						}

						.text {
							flex: 1;
							margin-left: 2vw;
							font-size: 3vw;
						}

						.del {
							width: 6.6vw;
						}
					}

					.content {
						width: 96vw;
						height: 100%;
						background: #0e1c18;
						border-radius: 2vw;
						box-sizing: border-box;
						padding: 3vw;
					}

					.number {
						position: absolute;
						bottom: 4vw;
						right: 5vw;
						opacity: 0.52;
					}

					.btn-box {
						width: 100%;
						display: flex;
						justify-content: space-between;
						align-items: center;
						// position: absolute;
						bottom: 4vw;
						left: 0vw;
						box-sizing: border-box;
						padding: 0vw 3vw;

						.left {
							display: flex;

							.btnItem {
								margin-right: 2vw;
							}
						}

						.right {
							display: flex;

							.btnItem {
								margin-left: 2vw;
							}
						}

						.btnItem {
							display: flex;
							border-radius: 100vw;
							box-sizing: border-box;
							padding: 1vw 2vw;
							display: flex;
							justify-content: center;
							align-items: center;

							.icon {
								width: 3vw;
								height: 3vw;
							}

							.text {
								margin-left: 1vw;
								font-size: 4vw;
							}

							&.style1 {
								background: rgba(0, 153, 127, 0.2);
								color: rgba(255, 255, 255, 1);
							}

							&.style2 {
								background: rgba(255, 255, 255, 0.1);
								color: rgba(102, 102, 102, 1);
							}
						}
					}

					.shou {
						width: 10vw;
						position: absolute;
						right: 5vw;
						top: 10vw;
						opacity: 0.52;
						.icon {
							width: 100%;
						}
					}
				}

				.audio-box {
					display: flex;
					flex-direction: column;
					width: 100%;
					height: 100%;
					overflow: hidden;

					.uploadAudio {
						display: flex;
						justify-content: center;
						align-items: center;
						margin: 2vw auto;
						padding: 1.86vw;
						border: 1px solid rgba(0, 222, 185, 1);
						background: linear-gradient(270deg, rgba(0, 222, 185, 1) 0%, rgba(122, 255, 233, 1) 100%);
						border-radius: 2vw;
						min-width: 86vw;

						.icon {
							width: 4vw;
							height: 4vw;
							display: block;
							margin-right: 2vw;
						}

						.text {
							color: #111111;
						}
					}

					.audio-list {
						flex: 1;
						overflow: auto;

						.audio-item {
							display: flex;
							justify-content: space-between;
							padding: 0vw 3vw;
							height: 20vw;

							.left {
								display: flex;
								justify-content: center;
								align-items: center;
								height: 100%;

								.pic-box {
									width: 20vw;
									height: 100%;
									position: relative;

									.audio-pic {
										width: 20vw;
										height: 20vw;
										display: block;
									}

									.playStatusIcon {
										position: absolute;
										left: 0vw;
										top: 0vw;
										width: 100%;
										height: 100%;
										display: flex;
										justify-content: center;
										align-items: center;

										.icon {
											width: 6.8vw;
											height: 6.8vw;
											display: block;

											&.playing {
												display: none;
											}
										}
									}
								}

								.date-time {
									width: 30vw;
									height: 100%;
									display: flex;
									flex-direction: column;
									justify-content: center;
									align-items: flex-start;
								}
							}

							.right {
								display: flex;
								justify-content: center;
								align-items: center;
								height: 100%;

								.time {
								}

								.icon {
									width: 5vw;
									height: 5vw;
									display: block;
									padding: 0vw 3vw;
								}

								.useBtn {
									background: linear-gradient(270deg, #00deb9 0%, #7affe9 100%);
									display: flex;
									justify-content: center;
									align-items: center;
									border-radius: 100vw;
									padding: 2vw 5vw;

									.useBtn-text {
										color: #111;
									}
								}
							}
						}
					}
				}
			}
		}

		.footer-bar {
			display: -webkit-box;
			height: 15vw;
			background: #1b302c;
			overflow: auto;
			position: relative;
			z-index: 98;
			font-size: 3vw;

			.footer-bar-item {
				width: 17vw;
				height: 100%;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				&.ac {
					.text {
						color: #00997f;
					}
				}

				.icon {
					width: 4.6vw;
					height: 4.6vw;
					display: block;
					margin-bottom: 1vw;
				}

				.text {
					color: #fff;
				}
			}
		}
	}

	.texts-kuang {
		background: rgba(0, 0, 0, 0.8);
		position: absolute;
		z-index: 101;
		left: 0vw;
		bottom: 0vw;
		width: 100%;
		height: 100vh;
		display: flex;
		align-items: end;

		.kuang-box {
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: center;

			.ipt-box {
				flex: 1;
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 2.5vw;
				background: rgba(255, 255, 255, 0.08);
				border: 1px solid rgba(0, 153, 127, 1);
				margin: 2vw 3vw;
				padding: 2vw;

				.icon {
					width: 6vw;
				}

				.ipt {
					margin-left: 2vw;
					flex: 1;
				}
			}
		}

		.cancel {
			box-sizing: border-box;
			padding-left: 1vw;
			padding-right: 4vw;
			display: flex;
			justify-content: center;
			align-items: center;

			.text {
				font-size: 28rpx;
				color: rgba(255, 255, 255, 1);
			}
		}
	}

	::v-deep .uni-popup-dialog {
		background: linear-gradient(180deg, #244343 0%, #22252b 100%);
	}
	::v-deep .uni-dialog-input {
		flex: 1;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 2.5vw;
		background: rgba(255, 255, 255, 0.08);
		border: 1px solid #00997f;
		margin: 0vw;
		margin-bottom: 2vw;
		color: #fff;
	}
	::v-deep .uni-dialog-button-text {
		color: #fff;
	}
	::v-deep .uni-button-color {
		color: #00997f;
	}
	::v-deep .uni-border-left {
		border-left-color: #000;
	}
	::v-deep .uni-dialog-button-group {
		border-top-color: #000;
	}
}
</style>
